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INTRODUÇÃO 
Guia de introdução 


Macromedia Fireworks MX é a solução para produção e projetos gráficos profissionais na Web. É 
o primeiro ambiente de produção que trata e resolve os desafios especiais que se apresentam aos 
desenvolvedores e projetistas gráficos da Web. 


Usar o Fireworks para criar, editar e animar imagens gráficas na Web, adicionar interatividade 
avançada e otimizar imagens em um ambiente profissional. No Fireworks, é possível criar e editar 
gráficos vetoriais e de bitmap em um único aplicativo. Tudo é editável, o tempo todo. E o usuário 
pode automatizar o fluxo de trabalho para atender as necessidades de atualizações e alterações 
demoradas. 


Fireworks opera integrado com outros produtos da Macromedia como Flash, FreeHand e 
Director e também com os mais conhecidos aplicativos de imagens gráficas e editores de HTML, 
para proporcionar uma solução de Web verdadeiramente integrada. Você pode facilmente 
exportar imagens gráficas do Fireworks com código personalizado de HTML e Java Script para o 
editor HTML que estiver usando. 


Requisitos do sistema 


Antes de instalar o Fireworks, assegurar-se de que seu computador esteja equipado com o 
hardware e software descritos a seguir. 


Microsoft Windows” 
* Processador Intel® Pentium® II de 300MHz 
e Windows 98 SE, ME, NTº 4 (Service Pack 6), 2000 ou XP 


e 64 MB de RAM disponível (recomenda-se 128 MB) mais 80 MB de espaço disponível em 
disco 


resolução de 800 x 600 pixels, 256 cores ou melhor 
e Adobe Type Manager? versão 4 ou posterior, para uso com fontes Tipo 1 


unidade de CD-ROM 


Macintosh? 


* Processador Power Macintosh G3, executando o OS 9.1 ou posterior, ou OS X versão 10.1 ou 
posterior 


e 64 MB de RAM disponível (recomenda-se 128 MB) mais 80 MB de espaço disponível em disco 
* resolução de 800 x 600 pixels, 256 cores ou melhor 


* Adobe Type Manager versão 4 ou posterior para uso com fontes Tipo 1 (somente OS 9.x) 


e unidade de CD-ROM 


Instalação do Fireworks 
Ler o documento ReadMe no DC-ROM do Fireworks para para ficar a par das informações mais 
recentes. 
Para instalar o Fireworks: 
1 Inserir o CD do Fireworks na unidade de CD-ROM do computador. 
2 Seguir um destes procedimentos: 


e No Windows, o programa de instalação do Fireworks se inicia, automaticamente. Se isso não 
acontecer, escolher Iniciar > Executar. Clicar em Procurar e escolher o arquivo Setup.exe no 
CD do Fireworks. Clicar em OK na caixa de diálogo Executar. 


e No Macintosh, clicar duas vezes no ícone Instalador do Fireworks. 
3 Seguir as instruções da tela. 
O programa de instalação solicita a digitação das informações necessárias. 


4 Quando solicitado, reiniciar o computador. 


Execução do Fireworks em sistemas conectados em rede 


A Macromedia utiliza detecção de licença de rede para impedir que cópias do Fireworks com o 
mesmo número de série sejam executadas em vários sistemas conectados por uma rede local. 


Se tentar iniciar o Fireworks e houver um número maior de usuários do que o definido pela licença 
executando o Fireworks na mesma rede, aparecerá um alerta de restrição de licença. 


Se achar que não deveria receber esta mensadem ou se desejar obter licenças adicionais para o produto, 
entre em contato com o Suporte Técnico da Macromedia em http://www.macromedia.com/br/ 
support/email/cs/. 


Exibição de um arquivo instalado com Fireworks 


Em algum momento pode ser necessário exibir ou acessar os arquivos instalados com o Fireworks. 
Durante a instalação, o Fireworks coloca os arquivos em vários locais no sistema. É importante 
entender onde esses arquivos residem e por quê. Para mais informações, consultar “Como 
trabalhar com arquivos de configuração” na página 427. 


Usuários de Macintosh devem prestar atenção especial ao novo formato que o Fireworks utiliza 
para armazenar o aplicativo e seus arquivos de configuração padrão. Para mais informações, 
consultar “Exibição do conteúdo do pacote (somente Macintosh)” na página 431. 


Como aprender o Fireworks 


Existem vários recursos para aprender a trabalhar com o Fireworks, inclusive um manual de início 
rápido impresso (Guia de introdução do Fireworks MX), o sistema de ajuda que pode ser iniciado 
no aplicativo, uma versão PDF da documentação completa do Fireworks e vários recursos 
informativos na Internet. 


8 Introdução 


A Ajuda do Fireworks está disponível sempre que o aplicativo estiver ativo e contém a 
documentação completa do Fireworks. Escolher Ajuda > Usando o Fireworks para abrir a Ajuda 
do Fireworks. Usuários do Mac OS X, escolher Ajuda > Ajuda do Fireworks. 


Os tutoriais do Fireworks fornecem uma introdução interativa aos principais recursos do 
aplicativo e podem ser concluídos em cerca de uma hora cada um. Eles incluem tarefas comuns do 
Fireworks como utilizar as ferramentas de desenho e edição, otimizar imagens e criar elementos 
interativos como rollovers e barras de navegação. 


O painel de Respostas é um local central onde é possível encontrar tutoriais, notas técnicas e as 
mais atualizadas informações sobre o Fireworks, tudo em um único lugar. O painel de Respostas é 
dinâmico; com apenas um clique no botão é possível obter as atualizações e informações mais 
recentes sobre o Fireworks, diretamente da Macromedia. 


O Aplicativo Fireworks possui várias caixas de diálogo e dicas de ferramentas, criadas para auxiliá- 
lo a utilizar o programa. As dicas de ferramentas aparecem quando o ponteiro ficar parado sobre 
um elemento da interface de usuário. 


Guia de introdução do Fireworks MX inclui informações de visão geral sobre os recusos básicos do 
Fireworks. 


O documento Utilização do Fireworks MX em PDFé um documento pesquisável e imprimível, que 
contém a documentação completa do Fireworks. O PDF está disponível no CD de instalação e no 
site da Macromedia na Web em http://www.macromedia.com/br/. 


O site da Macromedia na Internet é atualizado regularmente com as últimas informações sobre o 
Fireworks, além de apresentar recomendações de usuários especializados, tópicos avançados, exemplos, 
dicas e novidades. Consultar o site da Macromedia na Web para saber das últimas notícias sobre o 
Fireworks e como obter o máximo do programa no site http://www.macromedia.com/br/support/. 


O grupo de discussão Fireworks proporciona um intercâmbio estimulante para usuários do 
aplicativo, representantes de suporte técnico e para a equipe de desenvolvimento do Fireworks. Usar 
um leitor de grupo de notícias e ir para news://forums.macromedia.com/macromedia.fireworks. 


Extending Fireworks MX inclui informações sobre escrita em JavaScript para automatizar as tarefas 
do Fireworks. Todos os comandos ou configurações no Fireworks podem ser controlados 
usandocomandos JavaScript especiais que o Fireworks pode interpretar. A versão PDF do 
Extending Fireworks MX está disponível no CD de instalação e no site da Macromedia na Web em 
http://www. macromedia.com/support/fireworks/extend.html. 


Registro do Fireworks 


Para obter suporte adicional da Macromedia, é importante registrar a cópia do Macromedia 
Fireworks, pela Internet ou por correio. 


Ao efetuar o registro, o usuário será colocado na lista de prioridade para receber notícias do 
momento sobre atualizações e novos produtos da Macromedia. E receberá e-mails contendo 
informações sobre atualizações do produto e novidades que aparecerem nos sites 

www. macromedia.com e www-euro.macromedia.com. 

Para registrar sua cópia do Fireworks, seguir um destes procedimentos: 


* Escolher Ajuda > Registro on-line e preencher o formulário eletrônico. 


* Escolher Ajuda > Registro por correio, imprimir o formulário e enviar para o endereço indicado. 


Guia de introdução 9 


O que há de novo no Fireworks 


Os novos recursos tornam o Fireworks MX um aplicativo cada vez mais acessível com maior 
capacidade para criar gráficos e maior interatividade com sites da Web. O Fireworks MX aumenta 
a produtividade de designers experientes da Web, desenvolvedores de HTML que também 
trabalhem com gráficos e desenvolvedores da Web iniciantes, que precisem desenvolver páginas da 
Web interativas e ricas em gráficos, com pouco ou nenhum conhecimento de JavaScript. 


O Fireworks MX passou por um importante refinamento, com a racionalização da interface de 
usuário, capacidades mais poderosas de botões e menus pop-up e ferramentas vetoriais e de 
bitmap intuitivas. A integração com outros aplicativos da Macromedia — bem como com 
aplicativos de terceiros — facilita trabalhar com vários formatos de arquivos no Fireworks e enviá- 
los a outros aplicativos tranquilamente enquanto estiver trabalhando. Também é nova no 
Fireworks a capacidade para criar comandos JavaScript com o Macromedia Flash, que aparecem 
no Fireworks MX como painéis ou caixas de diálogo. 


Recursos fáceis de usar 


Graças a um ambiente de trabalho intuitivo e confortável — que inclui um Inspetor de 
propriedades e ferramentas que funcionam de forma profissional — o Fireworks MX é um 
aplicativo fácil de aprender e de início operacional rápido. O Fireworks MX tem nova aparência, 
melhor organizada e em consonância com outros aplicativos no Macromedia MX Studio. 


Os aprimoramentos do gerenciamento de painéis incluem a capacidade de agrupar painéis e 
recolher os grupos de modo que apenas a barra de título do grupo fique visível, até que seja 
necessário usar os painéis. Pode-se encaixar os grupos de painéis em uma área de encaixe de painel 
para organizar o espaço de trabalho ou arrastar grupos ou painéis individuais em qualquer lugar 
no espaço de trabalho. Para mais informações, consultar “Organização de grupos de painéis e 
painéis” na página 87. 

O Inspetor de propriedades é um painel dinâmico cheio de opções que mudam à medida que o 
usuário trabalha. Abrir um documento, e o Inspetor de propriedades exibirá as propriedades do 
documento como a cor e o tamanho da tela. Escolher uma ferramenta do painel Ferramentas, e o 
Inspetor de propriedades exibirá as opções da ferramenta. Selecionar um objeto vetorial, e ele 
exibirá as informações de traço e preenchimento. 


É possível alterar essas e outras opções — inclusive Efeitos ao vivo, modos de mesclagem e 
opacidade — diretamente do Inspetor de propriedades, em vez de clicar para abrir ou ativar painel 
após painel. O Inspetor de propriedades, — familiar aos usuários do Macromedia Dreamweaver e 
Flash — reduz o número de painéis no espaço de trabalho. Para mais informações, consultar 
“Utilização do Inspetor de propriedades” na página 85. 


A edição vetorial e de bitmap não-modal elimina a necessidade de manter-se atualizado nos 
modos vetoriais e de bitmap. Escolher uma ferramenta ou selecionar um tipo de objeto determina 
automaticamente se deverão ser criados e editados bitmaps, vetores ou texto. 


Aprimoramentos da edição de bitmap proporcionam capacidades intuitivas para criar bitmaps por 
meio de recortar ou copiar e colar, para mover seleções de moldura entre bitmaps e para efetuar o 
ajuste fino de imagens com um novo grupo de ferramentas de retoque de imagens. Além disso, os 
comandos de seleção comuns estão organizados em um novo menu Seleção. 
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As seções do painel Ferramentas, que separam as ferramentas usadas para criar e editar objetos de 
bitmaps, vetoriais e objetos da Web oferecem dicas para escolher de forma intuitiva a ferramenta 
adequada e alcançar os resultados criativos previsíveis. Outras ferramentas e recursos de 
ferramentas são separados nas categorias Selecionar, Cores e Exibir. Para mais informações, 
consultar “Utilização do painel Ferramentas” na página 84. 


O botão Exportação rápida exibe opções convenientes para exportar vários formatos de arquivo ou 
estilos de HTML ou iniciar outros produtos Macromedia a partir da janela de documento, 
eliminando o tempo de configuração e racionalizando o fluxo de trabalho. Para mais informações, 
consultar “Como usar o botão Exportação rápida” na página 361. 


O texto na tela permite integrar visualmente texto e gráficos sem a utilização do Editor de texto. 
Basta escolher a ferramenta Texto, clicar na tela e começar a digitar. No Inspetor de propriedades, 
é possível definir os atributos de texto para a ferramenta Texto antes de iniciar a digitação ou de 
realçar o texto existente e formatá-lo. O Fireworks MX tem uma gama de novos controles de texto 
e parágrafo para formatar texto. Para mais informações, consultar “Utilização de texto” na 


página 169. 


O zoom variável permite arrastar a ferramenta Ampliar para determinar o valor preciso da 
ampliação. Após arrastar para ampliar o documento, o valor da ampliação será exibido na caixa de 
texto Definir ampliação na parte inferior do documento. 


A compatibilidade com Windows XP e Macintosh OS X beneficia-se de sistemas operacionais mais 
recentes. O Fireworks MX é totalmente "carbonizado” para suportar todas as melhorias da 
interface de usuário do SO X. 


Exportação de XHTML permite exportar, atualizar e usar o Roundtrip XHT'ML nos mesmos 
estilos que o Fireworks oferece para HTML. É possível integrar totalmente (roundtrip) 
documentos legados que tenham sido convertidos em XHTML no Dreamweaver MX. 


Painel Resultados, um novo recurso no Fireworks MX, Dreamweaver MX e Flash MX, é um 
vínculo atualizável para o conteúdo da Web, localizado de forma conveniente no espaço de 
trabalho do Fireworks. Quando estiver on-line, o usuário poderá clicar no botão Atualizar e fazer 
o download de informações de referência recentes da Macromedia ou fazer pesquisa on-line de 
documentação em bancos de dados, como de notas técnicas. 


O corretor ortográfico pesquisa palavras incorretas em todos os blocos de texto do documento. Ao 
encontrar a palavra que não reconheça, ele oferece sugestões para corrigi-la ou permite adicioná-la ao 
seu dicionário. 


Cache de fonte entre plataformas facilita compartilhar arquivos entre grupos de trabalho e 
clientes sem se preocupar com problemas de fonte entre plataformas. O Fireworks mantém a 
aparência de todo o texto de um documento em sistemas que não tenham as fontes existentes 
nesse documento. 


Recursos de aumento de capacidade 


O Fireworks MX apresenta uma série de novos recursos poderosos de criatividade e automação 
que os designers iniciantes da Web acharão fáceis de usar e que agradarão aos desenvolvedores 
mais experientes. Esses recursos fazem com que o Fireworks seja um elemento essencial do 
processo de design e desenvolvimento da Web desde a concepção até a integração. 


O Assistente de gráficos controlado por dados permite atribuir variáveis a texto, imagens, pontos 
ativos e fatias, para gerar, em seguida, vários documentos baseados no original, cada um contendo 
informações exclusivas obtidas em um arquivo de banco de dados delimitado por vírgula ou XML. 
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O Criador da barra de navegação no menu Comandos automatiza o processo para a criação 
rápida de barras de navegação usando os convenientes símbolos de botão do Fireworks MX. É 
possível selecionar uma ocorrência de um símbolo de botão e escolher o número de cópias a fazer, 
escolher a orientação e o espaçamento vertical ou horizontal e atribuir rótulos de botão e URLs 
em uma caixa de diálogo integrada. 


Os aprimoramentos do Editor de menu pop-up acrescentaram controle criativo ao novo recurso 
mais popular do Fireworks 4. Agora, é possível criar um menu pop-up horizontal ou vertical e 
determinar as características da borda, espaçamento da célula e o tamanho da célula, 
independentemente do tamanho do texto. Também é possível definir a posição de menus em 
relação ao objeto de acionamento, assim como a posição de submenus em relação ao item do 
menu de acionamento ou ao menu pop-up principal. O Fireworks gera, automaticamente, o 
código JavaScript; os menus exportados são totalmente compatíveis com o Dreamweaver MX. 
Para mais informações, consultar “Criação de menus pop-up” na página 298. 


A edição de símbolo de botão no nível de ocorrência permite criar um símbolo de botão e, 
facilmente, diferenciar botões individuais com texto, URLs e alvos exclusivos usando o Inspetor 
de propriedades. Entretanto, é possível editar outras características gráficas no nível do símbolo e 
atualizar as edições em todas as ocorrências do botão sem afetar as propriedades no nível da 
ocorrência. Para mais informações, consultar “Criação de um símbolo de botão” na página 287. 


Recursos de fluxo de trabalho aberto 


Não é necessário ficar limitado ao fluxo de trabalho de outra pessoa. Com o Fireworks MX, é 
possível integrar a produção gráfica ao processo de desenvolvimento com um fluxo de trabalho 
aberto e eficiente, que reconhece e oferece suporte aos formatos de arquivo, aplicativos e padrões 
utilizados. 


Comandos JavaScript com interface SWF colocam a criação de comandos JavaScript em um nível 
mais elevado. Os desenvolvedores podem criar e executar comandos complexos para estender e 
automatizar o Fireworks MX por meio da combinação da API de extensibilidade do Fireworks 
JavaScript com interfaces desenvolvidas no Flash MX usando componentes e ActionScript. Para 
mais informações, consultar Extending Fireworks MX, disponível como documento PDF no CD de 
instalação e no site http://www.macromedia.com/support/fireworks/extend.html. 


Suporte ao Macromedia Exchange significa que os usuários, mesmo os que não estejam 
interessados em criar comandos JavaScript, podem fazer download de comandos criados por 
usuários a partir do Exchange. Os comandos aparecem no espaço de trabalho do Fireworks MX 
como painéis ou caixas de diálogo fáceis de usar. O Fireworks MX é fornecido com vários 
comandos criados pelo usuário no menu Comandos, assim como um painel Alinhar no menu 
Janela. 


Os controles de layout da tabela de fatias permitem definir e otimizar layouts da tabela de fatias 
arrastando as guias de fatia. O Fireworks redimensiona, automaticamente, as fatias anexadas, 
adicionando e excluindo fatias conforme necessário. Para mais informações, consultar 
“Movimentação de guias de fatia para editar fatias” na página 267. 


O recurso Reconstituir tabelas cria, de forma instantânea, um novo arquivo de origem PNG no 
Fireworks quando o usuário aponta para qualquer arquivo HTML que contenha tabelas com 
fatias de imagens. Comportamentos do Macromedia Fireworks e Dreamweaver, tais como 
rollovers de imagem e menus pop-up são importados e anexados às fatias apropriadas. 
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Isso será útil quando estiver trabalhando em projetos de site da Web existentes em que os únicos 
arquivos diponíveis forem as páginas HTML postadas. É possível abrir arquivos HTML no 
Fireworks e criar arquivos de origem PNG a partir deles. Para mais informações, consultar 
“Criação de arquivo PNG do Fireworks a partir de arquivos HTML” na página 78. 


Texto do Roundtrip Photoshop 6 permite abrir arquivos Photoshop 6 ou 7 com texto intacto, de 
forma que os gráficos possam ser editados e exportados novamente para o formato do Photoshop, 
enquanto mantêm aparência correta e possibilidade de edição. Para mais informações, consultar 
“Sobre importação de texto do Photoshop” na página 396. 


Roundtrip com Microsoft FrontPage está disponível com um clique no botão Exportação rápida. 
As tabelas Iniciar e Editar funcionam no arquivo original no Fireworks; as tabelas são atualizadas 
no FrontPage sem perder as alterações de código feitas no FrontPage. Para mais informações, 
consultar “Exportação de HT'ML do Fireworks para o FrontPage” na página 393. 


A integração com Macromedia Sitespring aplica as melhores práticas na produção e gerenciamento 
de clientes no espaço de trabalho do Fireworks MX. Basta escolher Janela > Sitespring para abrir a 
janela Sitespring. Para mais informações, consultar a documentação do Sitespring. 
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CAPÍTULO 1 
Tutorial de princípios básicos 
do projeto gráfico 


Este tutorial irá orientá-lo nas tarefas básicas para execução de um projeto gráfico com o 
Macromedia Fireworks MX. Você terá experiência prática usando o aplicativo gráfico da Web, 
líder no seu segmento, e aprenderá os conceitos básicos de um projeto gráfico no caminho. 


Se já estiver familiarizado com projetos gráficos no Fireworks, talvez deseje ir para “Tutorial de 
princípios básicos do projeto da Web” na página 43, onde aprenderá tudo sobre como projetar 
páginas da Web com o Fireworks. 


O que você aprenderá 


Neste tutorial, em menos de uma hora, terá concluído as tarefas necessárias para criar uma 
propaganda de aluguel de carros clássicos usando o Fireworks. Você aprenderá o seguinte: 


e Cópia da pasta Tutorials 

e Exibição do arquivo concluído 

e Criação e salva de um novo documento 

* Exploração do ambiente de trabalho do Fireworks 
e Criação e edição de um objeto vetorial 

* Importação de bitmap e seleção de pixels 

e Adição e edição de efeitos ao vivo 

* Como trabalhar com camada e objeto 

e Criação e edição de máscara 

e Criação e edição de um texto 


* Exportação do documento 


O que você deve saber 


Embora o tutorial seja projetado para usuários iniciantes do Fireworks, ele abrange diversos 
recursos novos do aplicativo, assim usuários avançados do Fireworks também podem ter 
benefícios. Não é necessário ser um designer gráfico para executar este tutorial, mas é preciso ter 
habilidades básicas com computadores e ser capaz de usar aplicativos comuns do espaço de 
trabalho. Entre outros, você deve saber como procurar arquivos e pastas no disco rígido. 
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Cópia da pasta Tutorials 


Antes de mais nada, fazer uma cópia da pasta Tutorials, para salvar os resultados do seu trabalho 
permitindo, assim, que você ou outro usuário conclua o tutorial posteriormente, usando os 
arquivos originais. 


1 


2 


Navegar até a pasta do aplicativo Fireworks no disco rígido. 

Nota: Se não conseguir exibir a pasta do aplicativo Fireworks, talvez tenha acesso limitado aos arquivos do 
sistema. É possível fazer o download dos arquivos necessários ao tutorial no Centro de suporte Fireworks na 
Web em http:/Avww.macromedia.com/br/support/. 


Arrastar uma cópia da pasta Tutorials para o espaço de trabalho. 


Exibição do arquivo concluído 


Exibir o arquivo do tutorial concluído para verificar a aparência do projeto após a conclusão. 


1 
2 


Iniciar o navegador da Web. 


No disco rígido, navegar até a pasta Tutorials, copiada no espaço de trabalho, e procurar 
Tutoriall/Complete. 


Nota: Algumas versões do Microsoft Windows ocultam, por padrão, as extensões dos tipos de arquivos 
conhecidos. Se essa configuração não tiver sido alterada, então os arquivos existentes na pasta Complete não 
exibirão as extensões. Ao manipular gráficos da Web, é preferível visualizar as extensões dos arquivos. Para 
informações sobre como exibir novamente as extensões de arquivos, consultar a Ajuda do Windows. 


Selecionar o arquivo final.htm e arrastá-lo para uma janela aberta do navegador. 


Neste tutorial, usará o Fireworks para desenhar e exportar uma cópia desta propaganda de aluguel 
de carros clássicos. 


Nota: A pasta Complete também inclui o documento do Fireworks a partir do qual será gerado este arquivo 
JPEG. Para exibir o documento, clicar duas vezes em final.png. 


Criação e salva de um novo documento 


Agora, que o arquivo final.htm foi exibido, você está pronto para iniciar seu projeto. 


1 


No Fireworks, selecionar Arquivo > Novo. 


A caixa de diálogo Novo Documento é aberta. 


Novo documento 


Tamanho da tela: 976.6K 
Largura: [500 | Pixels 


ėltura: [500 | [Pixels 


Resolução: | 72 | | Pixels/Polegadas 


Cor da tela: 
®© Branco 
(O Transparente 


O Personalizar EA 


| Cancelar 
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2 Digitar 480 para a largura e 214 para a altura. Certificar-se de que as medidas estejam em 
pixels e de que a cor da tela seja, branca e clicar em OK. 


Uma janela do documento é aberta com uma barra de título em que se lê Untitled-1.png 
(Windows) ou Untitled-1 (Macintosh). 


3 Sea janela do documento não estiver maximizada, ou seja, se não preencher o centro da tela, 
maximize-a clicando no botão de maximização (Windows) ou na caixa zoom (Macintosh) no 
topo da janela do documento. Isso proporcionará um grande espaço de trabalho. 


4 Selecionar Arquivo > Salvar como. 


A caixa de diálogo Salvar como (Windows) ou Salvar (Macintosh) é aberta. 


Salvar como 


Salvar em: B 


meus documentos 
3 Meu computador 
ka! Meus locais de rede 


Nome do arquivo: | Sem título-1.png | 
Salvar como Fireworks (*. png) x| 


5 Procurar a pasta Tutorials/Tutoriall no espaço de trabalho. 
6 Nomear o arquivo Vintage. 


7 Selecionar a opção Adicionar extensão de nome de arquivo, caso isso ainda não tenha sido feito 
(apenas Macintosh). 


8 Clicar em Salvar. 


A barra de títulos exibe o novo nome do arquivo com a extensão PNG. PNG é o formato de 
arquivo nativo do Fireworks. A arquivo PNG é o arquivo de origem; é onde você realizará todo 
o seu trabalho no Fireworks. No final deste tutorial, aprenderá como exportar seu documento 
para outro formato para usá-lo na Web. 


Quando estiver concluindo o tutorial, lembrar-se de salvar seu trabalho com freqüência 
selecionando Arquivo > Salvar. 
Nota: Na conclusão do tutorial, talvez ache útil desfazer uma alteração feita. O Fireworks pode desfazer várias das 


alterações recentes, dependendo do número de etapas de desfazer definido em Preferências. Para desfazer a 
alteração mais recente, selecionar Editar > Desfazer. 
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Exploração do ambiente de trabalho do Fireworks 


Antes de prosseguir o tutorial, examinar os elementos que compõem o ambiente de trabalho do 
Fireworks: 


Macromedia Fireworks MX - [Sem título-1.png @ 100%] 
de) Arquivo Editar Exbir Selecionar Modificar Texto Comandos Filtros Janela Ajuda 
e e 
E | Original | visualização | 2para cima | 4 para cima, 
Selecionar 


DS |© Camadada web 
oa 


Moldura 1 


Biblioteca: | UPLs.htm 


DI 1 41 ib & [500450 [100% ~ 


Documento | Tela: | | ( Tamanho datela.. ) [ Tamanho daimagem.. 


Semtítulol | 4 | GIF WebSnap 128 v 


Para Ajuda, pressione F1 


* No centro da tela está a janela do documento. No centro da janela do documento está a tela. 
Esse é o local em que são exibidos o documento Fireworks e quaisquer imagens criadas. 


e No topo da tela está uma barra de menus. A maior parte dos comandos do Fireworks pode ser 
acessando a partir da barra de menus. 


e No lado esquerdo da tela está o painel Ferramentas. Se o painel Ferramentas não estiver visível, 
selecionar Janela > Ferramentas. O painel Ferramentas é onde você encontrará as ferramentas 
para selecionar, criar e editar diversos itens gráficos, bem como objetos da Web. 


o 
Z 


a base da janela está o Inspetor de propriedades. Se o Inspetor de propriedades não estiver 
visível, selecionar Janela > Propriedades. O Inspetor de propriedades exibe as propriedades de 
cada objeto ou ferramenta selecionada. É possível alterar essas propriedades. Se não houver 
objetos ou ferramentas selecionadas, o Inspetor de propriedades exibirá as propriedades do 
documento. 


O Inspetor de propriedades exibe duas ou quatro fileiras de propriedades. Se o Inspetor de 
propriedades estiver na metade da altura, ou seja, exibindo apenas duas fileiras, será possível 
clicar na seta expansora no canto inferior direito para visualizar todas as propriedades. 


© 


Seta expansora na metade da altura 
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e No lado direito da tela há uma série de painéis como o painel Camadas e o painel Otimizar. É 
possível abrir esses e outros painéis a partir do menu Janela. 


Mover o ponteiro sobre diversos elementos da interface. Se o ponteiro for mantido sobre um 
item por algum tempo na interface, será exibida uma dica da ferramenta. As dicas das 
ferramentas identificam ferramentas, menus, botões e outros recursos de interface em todo o 
Fireworks. As dicas das ferramentas desaparecem ao distanciar o ponteiro dos elementos de 
interface que ele está identificando. 


Você aprenderá mais sobre cada um desses elementos à medida que avançar neste tutorial. 


Criação e edição de um objeto vetorial 
Com o Fireworks, pode-se criar e editar dois tipos de gráficos: objetos vetoriais e imagens bitmap. 


Um objeto vetorial é uma descrição matemática de uma forma geométrica. Os traçados vetoriais 
são definidos por pontos. Os traçados vetoriais não apresentam degradação na qualidade quando 
você os aumenta ou os dimensiona para mais ou para menos. A folha da ilustração abaixo é um 
conjunto de objetos vetoriais. Observar o grau de suavidade das bordas da folha mesmo quando se 
aumenta o objeto. 


Ao contrário, uma imagem bitmap é composta por uma grade de pixels coloridos. Imagens com 
variações complexas de cores como fotografias são, em geral, imagens bitmap. 


Enquanto vários aplicativos oferecem ferramentas para editar formas vetoriais ou imagens bitmap, 
o Fireworks permite que se trabalhe com ambos os tipos de gráficos. Você trabalhará com gráficos 
vetoriais nesta seção. 
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Criação de objetos vetoriais 


Agora, você criará dois dos elementos gráficos do seu documento. Primeiro irá criar um retângulo 


azul na parte inferior do documento. Depois, criará um retângulo que atuará como uma borda do 
conteúdo da tela. 


1 Selecionar a ferramenta Retângulo na seção Vetor do painel Ferramentas. 


Vetor 


/ 4.1 
DO A 


A v E Ferramenta Retângulo (U) 


C Ferramenta Retângulo Arredondado (U) 
g (O Ferramenta Elipse (U) 


mr (D Ferramenta Polígono (U) 
S 


2 No Inspetor de propriedades, clicar na caixa Cor de preenchimento. 


A janela pop-up Cor de preenchimento será aberta. 


[#FFFFFF ae 


Opções de preenchimento... 


3 Digitar 333366 na caixa de texto no topo da janela e, em seguida, pressionar Enter. 


A caixa Cor de preenchimento é alterada para um tom de azul escuro de modo a refletir sua 
opção de cor. 


4 Na janela do documento, posicionar o ponteiro em forma de cruz sobre a tela e arrastá-lo para 
baixo e para a direita para criar um retângulo. É possível desenhar o retângulo em qualquer 
lugar da tela. Mais adiante neste procedimento, irá posicioná-lo e redimensioná-lo. 


+ 


5 Ao soltar o botão do mouse aparecerá um retângulo azul escuro selecionado na área que 
você definiu. 
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É possível saber quando um objeto está selecionado pois esse é exibido com pontos azuis no 
canto. À maioria dos objetos também possui um realce azul em volta das bordas externas, mas 
os retângulos são uma exceção. 


6 No canto esquerdo inferior do Inspetor de propriedades, digitar 480 na caixa Largura e 15 na 
caixa Altura, depois pressionar Enter. 


O retângulo é redimensionado para ser ajustado às dimensões especificadas. 


l 7 Selecionar a ferramenta Ponteiro na seção Selecionar do painel Ferramentas. 


8 Arrastar o retângulo para que fique posicionado na parte inferior da tela, conforme mostrado 
abaixo. Usar as teclas de seta para obter um posicionamento exato. 


9 Selecionar a ferramenta Retângulo novamente e desenhar um segundo retângulo. Desenhá-la em 
qualquer parte da tela e colocá-la no tamanho desejado. Você alterará suas propriedades e posição 
na próxima seção. 


Definição de propriedades do objeto 


Aqui, editará o segundo retângulo criado alterando seu tamanho, posição e cor no Inspetor de 


propriedades. 


1 Com o retângulo ainda selecionado, clicar na caixa Cor do traço no Inspetor de propriedades e 
digitar CCCCCC como o valor da cor. Pressionar Enter para aplicar a alteração. 


ZA 


2 Definir o Tamanho da ponta como 1, arrastando o controle deslizante pop-up ou digitando 
um número na caixa de texto. 


[i |SndPier 


Botta: | 


3 Clicar na caixa Cor de preenchimento no Inspetor de propriedades e clicar no botão Transparente. 
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4 No Inspetor de propriedades, digitar os valores a seguir nas caixas de altura, largura e 
coordenada. Depois, clicar fora do Inspetor de propriedades para aplicar as alterações. 


Largura: 480 
Altura: 215 
e x:0 

e Y:0 


O retângulo se transforma em uma borda cinza em volta da borda da tela. 


Se o sistema usar o cinza cor de fundo da janela, talvez seja difícil visualizar o retângulo neste 
ponto. Mas, não se preocupe, ele ainda está lá. 


5 Selecionar a ferramenta Ponteiro e clicar em qualquer lugar fora do retângulo para cancelar a 
seleção. 


As propriedades alteram no Inspetor de propriedades. Como não há objetos selecionados, 
agora as propriedades do documento são visualizadas em vez das propriedades do objeto. 


Importação de bitmap e seleção de pixels 


A seguir, importará uma imagem bitmap e criará uma seleção flutuante com os pixels. 


Importação de imagem 
Você modificará a imagem de um automóvel clássico. Primeiro, é necessário importar a imagem. 


1 Selecionar Arquivo > Importar e navegar até a pasta Tutorials no espaço de trabalho. Procurar a 
pasta Tutoriall /Assets. 


2 Selecionar car.jpg e clicar em Abrir. 
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3 Alinhar o ponteiro de inserção com o canto superior esquerdo da tela e clicar, conforme 
mostrado na ilustração a seguir. 


r 


A imagem aparece selecionada na tela. 


4 Clicar em qualquer lugar fora da imagem selecionada para cancelar a seleção. 


Criação de seleção de pixels 


A seguir, você selecionará os pixels que compõem o carro na imagem importada e irá copiá-los e 
colá-los como um novo objeto. 


1 Selecionar a ferramenta Zoom na seção Exibir do painel Ferramentas. 


Ferramenta Zoom 


2 Clicar uma vez na imagem. 


A exibição é ampliada para 150%. O aumento permite melhor visualização do objeto 
selecionado e oferece um controle mais apurado sobre a seleção. 


3 Clicar e manter pressionado o botão do mouse na ferramenta Laço na seção Bitmap do painel 
Ferramentas. Selecionar a ferramenta Laço polígono no menu pop-up que aparece. 


Bitmap 


A ferramenta Laço polígono permite que você desenhe uma seleção em volta dos pixels usando 
uma série de linhas retas. Você usará a ferramenta Laço polígono para selecionar os pixels que 
formam a imagem do carro. 


4 No Inspetor de propriedades, definir a opção Borda como Suavização de serrilhado. 
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5 Clicar com o ponteiro da ferramenta Laço polígono na borda superior do carro, depois clicar 
várias vezes em volta da borda do carro para continuar com a seleção. 


6 Completar a seleção movendo o ponteiro sobre o ponto em que iniciou a seleção. Um pequeno 
quadro cinza aparece ao lado do ponteiro Laço polígono para indicar que você está quase 
completando a seleção. Clicar para completar a seleção. 


Uma borda de moldura aparecerá em volta dos pixels selecionados. 
7 Selecionar Editar > Copiar. 
A seleção é copiada na Área de transferência. 
8 Selecionar Editar > Colar. 
A imagem do carro é colada no documento como um novo objeto bitmap. 


9 Selecionar a ferramenta Ponteiro e clicar duas vezes em qualquer lugar fora do bitmap para 
cancelar a seleção. 


10 Clicar no menu pop-up Definir ampliação, na base da janela do documento, e retornar à 
exibição100%. 
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Adição e edição de efeitos ao vivo 


A seguir, aplicará efeitos ao vivo à imagem bitmap original. Além disso, alterará o embaçamento. 


1 Clicar em qualquer parte da imagem do deserto. (Porém, cuidado para não clicar no carro.) 


2 No Inspetor de propriedades, clicar no botão Adicionar efeitos (o botão com o sinal mais (+)). 


Botão Excluir efeitos 
Botão Adicionar efeitos 


3 Selecionar Ajustar cor > Matiz/Saturação no menu pop-up Efeitos. 


A caixa de diálogo Matiz/Saturação é exibida. 


Matiz/Saturação 


Saturação: 


Luminosidade 


4 Selecionar a opção Colorir e clicar em OK. 


C Colorir 
Visualização 


A imagem fica colorida na tela e o efeito é adicionado à lista de Efeitos ao vivo no Inspetor de 
propriedades. Os efeitos ao vivo são editáveis; sempre é possível adicioná-los à lista, excluí-los 


ou editá-los. 


E 100.» | Normal v| © 


Efeitos: +, 


v O MatiziSaturação... 
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5 Para editar um efeito, clicar duas vezes em Matiz/Saturação. 
[o] Dica: Uma outra opção, é clicar no botão Informações ao lado do efeito. 
A caixa de diálogo Matiz/Saturação é exibida novamente. 
6 Alterar o Matiz para 25 e a Saturação para 20, e clicar em OK. 


Os níveis de matiz e saturação da imagem são alterados para exibir uma aparência sépia, como 
nas fotografias antigas. 


7 Para adicionar um outro Efeito ao vivo, clicar novamente no botão Adicionar efeitos. 


8 Selecionar Embaçar > Embaçamento maior no menu pop-up Efeitos. 


Os pixels do bitmap selecionado ficaram embaçados e o novo efeito é adicionado à lista de 
Efeitos ao vivo no Inspetor de propriedades. 


Como trabalhar com camada e objeto 


As camadas dividem um documento do Fireworks em planos distintos. Um documento pode ser 
formado por várias camadas e cada uma delas pode conter vários objetos. No Fireworks, o painel 
Camadas relaciona as camadas e os objetos contidos em cada camada. 


Com a utilização do painel Camadas, é possível nomear, ocultar, mostrar e alterar a ordem de 
empilhamento das camadas e objetos, bem como mesclar bitmaps e aplicar máscaras de bitmap. 
Além disso, pode adicionar e excluir camadas com o painel Camadas. 


Nesta parte do tutorial, usará o painel Camadas para mesclar as duas imagens bitmaps. Depois, 
nomeará os objetos no seu documento. Além disso, usará o painel Camadas para alterar a ordem 
de empilhamento dos objetos. 


Mais adiante no tutorial, irá usar o painel Camadas para aplicar uma máscara à imagem mesclada. 


Mesclagem de bitmaps 


Agora que aplicou efeitos ao vivo à imagem de fundo, irá mesclá-la com a imagem do carro em 
tons de cinza para criar um único bitmap. 
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1 Seo painel Camadas estiver minimizado ou invisível, clicar na seta expansora ou selecionar 
Janela > Camadas. 


Seta expansora 


E 100 4 | Normal 

o æ E Camadadaweb «H» 

Ds Ê © Camadal 
æ | 


Bitmap 


iE Bitmap 


Retângulo 


Retângulo 


Moldura 1 


2 Clicar na miniatura da imagem do carro em tons de cinza no painel Camadas. 


3 Com a imagem do carro selecionada, clicar no ícone do menu pop-up Opções na parte direita 
superior do painel Camadas. 


Nova imagem Ícone do menu pop-up Opções 


Nova camada... 
Duplicar camada... 
Compartilhar esta camada 
Edição de camada única 
Excluir camada 


mim! 


Nivelar seleção 
Mesclar para baixo 


Ocultar tudo 
Mostrar tudo 
Bloquear todas 
Desbloquear todas 


Adicionar máscara 


Opções de miniatura... 
Ajuda 


Fechar grupo de painéis 


4 Selecionar Mesclar para baixo. 
No painel Camadas, os dois objetos bitmap são mesclados em um bitmap. 


No Inspetor de propriedades não há mais efeitos na lista de Ffeitos ao vivo. Isto é porque 
mesclar para baixo combina os pixels de cada bitmap e os renderiza de modo não editável como 
imagens separadas. Os efeitos ao vivo aplicados a um objeto ou bitmap não são mais editáveis 
depois que uma mesclagem para baixo for executada em outro bitmap. 
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Nomeação de um objeto 


É sempre bom nomear seus objetos para poder identificá-los com facilidade mais tarde. Quando 
um documento se tornar grande e possuir vários objetos, o manuseio ficará difícil se os objetos 
não tiverem nomes exclusivos. 


Nesta parte, nomeará os objetos no documento usando o painel Camadas e o Inspetor de 


propriedades. 
1 Clicar duas vezes na palavra Bitmap ao lado da miniatura da imagem no painel Camadas. 


Uma caixa de texto é exibida. 


8 É O Camada o 
$ 
x: Retângulo 
=: Retângulo 


2 Digitar Classic Car na caixa de texto e pressionar Enter. 


O novo nome é aplicado ao objeto bitmap. 


[+ 


é É 

Efioo ~ | Normal 

Ds E Camadadaweb <H» | 
im 


Retângulo 


Retângulo 


Moldura 1 E o Ë 


3 Na janela do documento, selecionar o retângulo cinza que circunda o documento. Se estiver 
muito difícil a visualização na tela, selecioná-lo no painel Camadas. 


Desta vez, nomeará um objeto usando o Inspetor de propriedades. 


4 Digitar Border na caixa Nome do objeto do Inspetor de propriedades e pressionar Enter. 


Fetângulo 


O nome digitado também é exibido do lado da miniatura do objeto no painel Camadas. 


5 Digitar um nome para o objeto do retângulo remanescente usando o painel Camadas ou o 
Inspetor de propriedades. Usar qualquer nome, mas certificar-se de que esteja escolhendo um 
nome representativo para poder identificar e gerenciar objetos facilmente no documento mais 
tarde. 
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Alteração da ordem de empilhamento de um objeto 


A imagem bitmap mesclada sobrepõe o objeto da borda e o retângulo azul. A borda e o retângulo 
azul precisam permanecer no topo, pois você usará o painel Camadas para alterar a ordem de 
empilhamento dos objetos no documento. 


1 Clicar na miniatura do retângulo azul do painel Camadas para selecioná-la. 
2 Arrastá-la para o topo da Camada 1, acima da miniatura Classic Car. 


Nota: A camada mais acima no painel Camadas é sempre a camada da Web. Você aprenderá mais sobre a 
camada da Web em “Tutorial de princípios básicos do projeto da Web” na página 48. 


Durante o arraste do mouse, o ponteiro é alterado de modo a refletir que você está arrastando 
um objeto (apenas no Windows). Uma linha escura no painel Camadas indica onde o objeto 
será solto se o botão do mouse for liberado naquele momento. 


3 Soltar o botão do mouse. 


O retângulo azul é solto logo acima do objeto bitmap no painel Camadas. A ordem de 
empilhamento dos objetos também é alterada na tela. Agora, o retângulo azul sobrepõe o 
objeto bitmap e o objeto da borda. 


E 100 = | Normal 
Ds E Camada da Web 
GENI 


> 
= MH] Classic Car 
= Border 


Moldura 1 pe E m 


4 Você deseja que o objeto da borda seja o objeto mais superior, então selecionar sua miniatura e 
arrastá-la para o topo do painel Camadas, acima do retângulo azul. 


E 100 4 | Normal 
Ds E CamadadaWeb H» 
E 8 PD Camadai 


a 
= Rectangle 
= i g Classic Car 


Moldura 1 pea E 0 
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Criação e edição de máscara 


Agora que várias modificações já foram efetuadas na imagem do carro clássico, você executará um 
último procedimento para que ela fique transparente gradativamente. 


No Fireworks é possível aplicar dois tipos de máscaras: máscaras vetoriais e máscaras de bitmap. 
Neste tutorial, será aplicada uma máscara de bitmap simples à imagem do carro. Depois, irá 
modificá-la colocando um preenchimento de dégradé. Os pixels da máscara exibirão ou ocultarão a 
imagem do carro em função do valor de tons de cinza neles existentes. 


Aplicação de máscara 


Primeiro, aplicará uma máscara de bitmap branca e vazia, à imagem do carro. À máscara branca 
mostra um objeto ou uma imagem selecionada, enquanto os pixels pretos em um máscara 
ocultam a imagem ou o objeto selecionado. 


Além disso, irá pintar a máscara para fazer com que a imagem do carro pareça estar desaparecendo 
no fundo. 


1 Coma ferramenta Ponteiro, selecionar a imagem bitmap. 


2 Clicar no botão Adicionar máscara na base do painel Camadas. 


Uma máscara transparente e vazia será adicionada à imagem selecionada. Para verificar se a 
máscara foi adicionada, observar a miniatura da máscara no painel Camadas. O realce amarelo 
em volta da miniatura da máscara indica que ela está selecionada. 


Border 
= Fetângulo 
= F i E = Classic Car 


Moldura 1 as 


Miniatura da máscara 


Objeto da máscara 


Edição da máscara 


Agora, você vai dar à imagem bitmap uma transparência aparente introduzindo um preenchimento 
de dégradé na máscara. 


1 Coma miniatura da máscara selecionada no painel Camadas, clicar e manter o botão do mouse 
pressionado na ferramenta Lata de tinta na seção Bitmap do painel Ferramentas. Selecionar a 
ferramenta Dégradé no menu pop-up que aparece. 


2 61 


vetor Y È Ferramenta Lata de tinta (G) 
E Ferramenta Dégradé (G) k 
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Clicar na caixa Cor de preenchimento no Inspetor de propriedades. 

A janela pop-up Editar dégradé é aberta. 

Selecionar Branco, Preto na base do menu pop-up Predefinição. 

Os exemplos e a inclinação da cor são alterados para refletir a nova configuração. Os exemplos de 


cores localizados logo abaixo da inclinação da cor permitem a modificação das cores no dégradé. 


Hs 


Inclinação da cor 


Exemplos de cor 
Predefinição: 


Visualização: 


Arrastar o exemplo de cores (branca) da esquerda para a direita, cerca de 1/4 do caminho, para 
ajustar o dégradé. 


Clicar fora da janela pop-up Editar dégradé para fechá-la. 


Na tela, arrastar o ponteiro Dégradé pela imagem bitmap, como mostrado na ilustração a 
seguir. A avaliação visual aparece na tela durante o arraste do mouse, permitindo a definição do 
ângulo e da distância em que o dégradé será aplicado. 


Soltar o botão do mouse. 


A máscara é modificada com o preenchimento de dégradé criado. A máscara afeta a imagem do 
carro conferindo a ela uma aparência de transparência em dégradé. A miniatura da máscara no 
painel Camadas exibe o preenchimento de dégradé aplicado. 


Hfi s | normal 
[E Camada da Web 


C | Blue rectangle 


Moldura 1 
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8 Selecionar a ferramenta Ponteiro e clicar na miniatura da máscara no painel Camadas. 


O Inspetor de propriedades mostra que a máscara foi aplicada usando sua aparência de tons de 
cinza. Os pixels mais escuros da máscara bloqueiam a imagem do carro, enquanto os pixels 
mais claros mostram o carro. 


Criação e edição de um texto 


A seguir, adicionará texto ao documento e aplicará propriedades ao texto com o Inspetor de 
propriedades. Além disso, criará quatro blocos de texto, dois para o título da propaganda e dois 
para o texto do corpo. 


Criação do texto de título 


Primeiro criará o texto do título para a propaganda de aluguel de carro. 


1 Selecionar a ferramenta Texto na seção Vetor do painel Ferramentas e mover o ponteiro sobre a 
janela do documento. 


O ponteiro é alterado para uma forma de I e o Inspetor de propriedades exibe as propriedades 
do texto. 


Tamanho 
Cor do preenchimento 


Fonte Botões de estilo 


] 
Ferramenta (Arial ||" 
Texto 


S E 100%)» Normal v|O 
E 


Efeitos: + 


4 


Entrelinhamento 


Escala horizontal Botões de alinhamento 


2 No Inspetor de propriedades, executar um destes procedimentos: 
* Selecionar Times New Roman no menu pop-up Fonte. 
e Digitar 85 como o tamanho da fonte. 


e Clicar na caixa Cor de preenchimento. O ponteiro é alterado para um conta-gotas. Clicar no 
ponteiro conta-gotas no retângulo azul da tela. 


A janela pop-up de cores é fechada e a caixa Cor de preenchimento é alterada para refletir a cor 
escolhida. 
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Certificar-se de que nenhum dos botões de estilo (Negrito, Itálico e Sublinhado) esteja selecionado. 
Clicar no botão Alinhamento à esquerda. 

Com o ponteiro em forma de I, clicar uma vez no meio da tela. 

Um bloco de texto vazio será criado. 


O círculo vazado no canto superior direito do bloco de texto indica que o bloco de texto é 
dimensionado automaticamente. Um bloco de texto dimensionado automaticamente no 
Fireworks ajusta sua própria largura com base na linha de texto mais longa do bloco. 


Indicador de dimensionamento automático 


Digitar Vintage no bloco de texto. 


A largura do bloco de texto é expandida durante a digitação. 
Clicar uma vez fora do bloco de texto para aplicar a entrada do texto. 


O bloco de texto permanece selecionado e a ferramenta Texto ainda é a ferramenta selecionada. 
O círculo vazado no bloco de texto não está mais visível. Esse indicador somente está visível 
durante a inserção ou edição de texto. 


Selecionar a ferramenta Ponteiro e arrastar o texto para posicioná-lo como mostrado na 
ilustração a seguir. 


Vintage 


Clicar fora do bloco de texto para cancelar a seleção e escolher de novo a ferramenta Texto. 
No Inspetor de propriedades, escolher Arial como fonte e 12 como o tamanho da fonte. 


Clicar novamente na tela, em algum lugar sob o bloco de texto recém-criado e digitar 


CLASSIC RENTALS em caixa alta. 
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10 Selecionar a ferramenta Ponteiro para aplicar a entrada do texto. 


A alternância para uma outra ferramenta no painel Ferramentas aplica entradas e edições de 
texto da mesma forma que ao clicar fora de um bloco de texto. Ao pressionar a tecla Esc você 
obterá o mesmo resultado. 


1 Arrastar o novo bloco de texto para posicioná-lo logo abaixo do bloco de texto Vintage, 
conforme mostrado na ilustração a seguir. 


12 Clicar fora do bloco de texto para cancelar a seleção. 


Criação do texto do corpo 
Em seguida, criará dois blocos de texto que compõem o texto do corpo desta propaganda. 
1 Selecionar a ferramenta Texto. 


2 Agora, em vez de apenas clicar na tela, arrastar a ferramenta para desenhar uma moldura com o 
ponteiro em forma de I, conforme mostrado na ilustração a seguir. 


“Vintage 


CLASSIC RENTALS 


A bloco de texto é exibido. O quadrado vazado no canto superior direito indica que o bloco de 
texto tem uma largura fixa, definida pela moldura desenhada. Os blocos de texto com largura 
fixa mantêm a mesma largura especificada independentemente da quantidade de texto 
digitado. A alça de canto vazada é ativada ou desativada ao ser clicada. Clicando duas vezes nela 
alternará o bloco de texto entre dimensionamento automático e largura fixa. 


3 Digitar o texto a seguir sem inserir nenhuma quebra de linha durante a digitação: 


Indulge yourself by traveling in a Vintage classic automobile, with a chauffeur to whisk you 
to any destination. 
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Dica: Se você estiver exibindo o tutorial on-line, basta simplesmente copiar e colar o texto acima no bloco de 
texto do Fireworks. 


“Vintage 


ndulge yourself by traveling in a Vintage) 
lassic automobile, with a chauffeur to 
hisk you to any destination 


O texto flui no bloco de texto criado. O bloco de texto cresce na vertical, não na horizontal. 


4 Selecionar a ferramenta Ponteiro e clicar fora do bloco de texto para cancelar a seleção. Depois, 
escolher de novo a ferramenta Texto. 


5 No Inspetor de propriedades, clicar na caixa Cor de preenchimento e escolher o branco como a 
cor do texto. 


6 Clicar no canto inferior esquerdo da tela. 
Um novo bloco de texto será exibido no topo do retângulo azul. 


7 Digitar o texto a seguir em caixa alta sem inserir quebras de linha: 


SPORTS - LUXURY - CONVERTIBLE - LIMOUSINE - ANTIQUE - NEO-CLASSIC - 
EXOTIC - ROADSTER 


Dica: Se estiver exibindo o tutorial on-line, basta simplesmente copiar e colar o texto acima. 


8 Selecionar a ferramenta Ponteiro e reposicionar o bloco de texto conforme mostrado a seguir. 


“Vintage 


Indulge yourself by traveling in a Vintage 
classic automobile, with a chauffeur to 
whisk you to any destination 


3SIC - EXOTIC - ROAS 


Todo texto criado no Fireworks pode ser editado da mesma forma que em um processador de 
textos. Para editar texto, basta clicar duas vezes em um bloco de texto com a ferramenta Ponteiro, 
realçar o texto a ser alterado e digitar em cima dele. Ou, clicar com o ponteiro em forma de I em 
qualquer parte do bloco de texto para introduzir o novo texto. 
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Definição de uma propriedade de texto 


Agora que os blocos de texto foram criados, você utilizará o Inspetor de propriedades para alterar 
diversas propriedades do texto. 


1 Selecionar o bloco de texto Vintage. 


As propriedades do bloco de texto aparecem no Inspetor de propriedades. Essas propriedades 
são semelhantes às opções exibidas quando a ferramenta Texto está selecionada. 


2 No Inspetor de propriedades, executar um destes procedimentos: 


* Selecionar Suavizar serrilhado no menu pop-up Nível de suavização de serrilhado, caso esse ainda 
não esteja selecionado. A suavização de serrilhado suaviza as bordas do texto para que os caracteres 
do texto apareçam mais limpos e mais legíveis. 


Em geral, as fontes serif, como Times New Roman, têm melhor aparência se a opção Suavizar 
serrilhado estiver definida com um tamanho superior a 45 pontos. Da mesma forma, as fontes 
sans serif, como Arial, têm melhor aparência se a opção Suavizar serrilhado estiver definida com 
um tamanho superior a 32 pontos. 

Dica: O termo serif se refere a linhas mínimas (muitas vezes chamadas de “pés”) anexadas aos caracteres do 


texto de fontes como Times New Roman. A fonte Arial é considerada uma fonte sans serif porque os caracteres 
do texto não contêm serifs. 


e Definir a opção Escala horizontal no Inspetor de propriedades como 89% e pressionar Enter. 


NEAN 


Os caracteres no bloco de texto Vintage se tornam mais finos. A escala horizontal alonga ou 
reduz os caracteres no texto selecionado no sentido horizontal. A configuração padrão é 100%. 
Uma opção maior alongará o texto na horizontal e uma opção menor diminuirá na largura. 


3 Arrastar o bloco de texto Vintage para que fique posicionado como mostrado na ilustração a 
seguir. 


Indulge yourself by traveling in a Vintage 
classic automobile, with a chauffeur to 
whisk you to any destination. 


- LIMOUSINE - ANTIQUE - NEO-CLASSIC - EXOTIC - ROAÍ 


4 Selecionar o bloco de texto Classic Rentals. 
5 No Inspetor de propriedades, executar um destes procedimentos: 
e Clicar na caixa Cor de preenchimento, digitar FF6600 como o valor da cor e pressionar Enter. 


e Clicar no botão Negrito. 
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Selecionar Ondular suavização de serrilhado no menu pop-up Nível de suavização de serrilhado. 


Em geral, as fontes sans serif como a Arial têm melhor aparência se definidas como Ondular 
suavização de serrilhado quando seus tamanhos forem entre 12 e 18 pontos. Da mesma forma, 
as fontes serif têm melhor aparência se definidas como Ondular suavização de serrilhado, 
quando seus tamanhos forem entre 24 e 32 pontos. 


Arrastar o bloco de texto para reposicioná-lo como mostrado a seguir. 


Vintage 


Indulge yourself by traveling in a Vintage 
classic automobile, with a chauffeur to 
whisk you to any destination 


E - LIMOUSINE - ANTIQUE - NEO-CLASSIC - EXOTIC - ROAI 


Selecionar o bloco de texto Mate. 

No Inspetor de propriedades, executar um destes procedimentos: 

Definir o tamanho da fonte como 13. 

Selecionar preto como a cor do texto. 

Clicar no botão Alinhamento à direita. 

Selecionar Ondular suavização de serrilhado no menu pop-up Nível de suavização de serrilhado. 
Definir a opção Escala horizontal como 88%. 


Definir a opção Entrelinhamento como 150% e pressionar Enter. O entrelinhamento define o 
espaço entre as linhas do texto. O entrelinhamento normal de texto é 100%. Qualquer opção 
acima de 100% aumentará o espaço entre as linhas e qualquer fator abaixo moverá as linhas 
para ficarem mais próximas. 


je E 


Arrastar uma das alças de canto do bloco de texto para redimensioná-lo, a fim de que o texto 
flua como mostrado a seguir. Se necessário, arrastar todo o bloco de texto para reposicioná-lo. 


Vintage 


dulge yourself by traveling in a Vintag 
classic automobile, with a chauffeur to 


whisk you to any destination. 


- LIMOUSINE - ANTIQUE - NEO-CLASSIC - EXOTIC - ROAI 
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10 Selecionar o bloco de texto na base do documento. 
1 No Inspetor de propriedades, executar um destes procedimentos: 


e Definir o tamanho da fonte como 13. 
* Selecionar Ondular suavização de serrilhado no menu pop-up Nível de suavização de 
serrilhado. 


e Definir a opção Escala horizontal como 75% e pressionar Enter. 


12 Reposicionar o bloco de texto se necessário. 


whisk you to any destination. 


+ 
SPORTS - LUXURY 


NVERTIBLE - LIMOUSINE - ANTIQUE - NEO-CLASSIC - EXOTIC - ROADSTER 4 
Adicionar uma sombra ao texto 


É possível aplicar efeitos ao vivo ao texto. Aqui, irá adicionar uma sombra ao texto Vintage 
usando os controles de Efeitos ao vivo no Inspetor de propriedades. 


1 Selecionar o bloco de texto Vintage. 


2 Clicar no botão Adicionar efeitos no Inspetor de propriedades. Selecionar Sombra e brilho > 
Aplicar sombra no menu pop-up Efeitos. 


As opções para o novo efeito aparecem em uma janela pop-up. 


3 Digitar 5 em Distância e 60% em Opacidade. Clicar fora da janela pop-up para fechá-la. 
Um efeito de sombra é adicionado ao bloco de texto Vintage. 


4 Clicar em uma área vazia da janela do documento para cancelar a seleção do bloco de texto. 


Exportação do documento 


Nesta fase, você criou um objeto vetorial e editou suas propriedades, importou uma imagem 
bitmap e fez modificações nos pixels, além de ter criado e formatado texto. Agora, está pronto 
para otimizar e exportar o documento. 


Otimização do gráfico 


Antes de exportar qualquer documento do Fireworks, sempre é necessário otimizá-lo. A 
otimização assegura que um gráfico seja exportado com o melhor equilíbrio de compressão e 
qualidade possível. 


1 Executar um destes procedimentos para abrir o painel Otimizar, caso ainda não esteja aberto: 
è Selecionar Janela > Otimizar. 


* Seo painel estiver minimizado no lado direito da tela, clicar na seta expansora para exibir todo 
o painel. 


38  Capítulo1 


2 Selecionar JPEG - Melhor qualidade no menu pop-up Configurações. 


As opções no painel são alteradas para refletir a nova configuração. 


Configuração: JPEG-Melhorqv + — 


JPEG E v Mate: [| 


Qualidade: (80 |v 
Qualidade seletiva: 90 [72 


Suavização: | o y 


Classificar por: Nenhum O cores 


ema a 


Essas configurações podem ser alteradas, mas neste tutorial usaremos as configurações padrão. 


3 Clicar na guia Visualizar perto do topo da janela do documento. 


A guia Visualizar exibe o documento na forma como ele aparecerá quando exportado com as 


configurações atuais. 


A vintage.png @ 10 


Visualização | 2paracima | 4 paracima 


Tamanho do arquivo 


Tempo de transferência 


DAR) 


27.00K 4 seg a 56kbps JPEG (Documento) Ga 


intage 


CLASSIC RENTALS 


Indulge yourself by traveling in a Vintage 
classic automobile, with a chauffeur to 
whisk you to any destination. 


EY - LOTUS - LAMBORGHINI - PORSCHE 


Na parte superior direita da janela, o Fireworks exibe qual será o tamanho do arquivo 
exportado e o tempo estimado que levará para exibir o gráfico ao ser visualizado na Web. 
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Exportação do gráfico 
O gráfico foi otimizado, portanto você já está pronto para exportá-lo como um arquivo JPEG. 
1 Selecionar Arquivo > Exportar. 


A caixa de diálogo Exportar é aberta. 


Exportar 


Salvar em: | O Export 


Nome do arquivo: | vintage.jpg | Lavar ] 
Arquivos do tipo: | Somente imagens x] 


HTML: 


Fatias: 


O nome do arquivo listado possui a extensão .jpg. O Fireworks escolhe este formato de 
arquivo, pois foi selecionado no painel Otimizar. 


2 Navegar até a pasta Tutorials no espaço de trabalho e procurar Tutoriall/Export. 


3 Certificar-se de que o menu pop-up Salvar como tipo (Windows) ou Salvar Como (Macintosh) 
lê Somente imagens e clicar em Salvar. 


O arquivo JPEG é exportado para o local especificado. 


Lembrar-se de que o arquivo PNG é seu arquivo de origem ou arquivo de trabalho. Embora 
tenha exportado o documento no formato JPEG, também é necessário salvar o PNG, pois, 
assim, qualquer alteração feita também será refletida no arquivo de origem. 


4 Selecionar Arquivo > Salvar para salvar as alterações no arquivo PNG. 


5 Selecionar Arquivo > Fechar. 


Exibição do documento exportado 
O novo arquivo criado durante o processo de exportação está localizado na pasta especificada. 
1 No Fireworks, selecionar Arquivo > Abrir e procurar a pasta Export. 


O Fireworks criou um arquivo neste local denominado vintage. jpg. 
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2 Selecionar vintage.jpg e clicar em Abrir, 


O gráfico é aberto em uma nova janela do documento do Fireworks. No painel Camadas, 
todos os objetos foram nivelados. Quando isso ocorre, os objetos são mesclados em um único 
objeto e tornam-se objetos que não podem ser editados como objetos separados. 


H 100 M | Normal 

Ds E Camada da Web 
Ds E Camadal 

o |@| f BD Fundo 


CARA F Bitmap 


Moldura 1 [Ea 5] E] 


O Inspetor de propriedades exibe as propriedades de um bitmap. Todos os efeitos ao vivo e 
outros atributos aplicados com o Inspetor de propriedades não estão mais disponíveis para o 
bitmap selecionado. 


|= Bitmap E3 [10024] | normal v| 
Efeitos: +, 
w: 480 | xo | 


o 


O documento fica com essa aparência porque o Fireworks tem que nivelar a imagem e todas as 
propriedades quando se escolheu exportá-lo para o formato JPEG. No entanto, você ainda tem 
o arquivo PNG de origem, assim se precisar trabalhar mais no desenho, sempre será possível 
abrir o arquivo PNG e todos os objetos ainda poderão ser editados. 


3 Selecionar Arquivo > Abrir e selecionar vintage.png na pasta Tutoriall. Clicar em Abrir. 


No painel Camadas, todos os objetos estão novamente disponíveis como objetos separados. 
Cada objeto é editável e possui suas propriedades. 


4 Clicar em cada objeto. 

O Inspetor de propriedades exibe as diversas opções para cada um dos objetos selecionados. 
5 Selecionar o texto Vintage na tela. 

O efeito ao vivo Aplicar sombra desse objeto de texto aparece no Inspetor de propriedades. 


Agora, é possível observar a vantagem de usar um arquivo PNG do Fireworks como seu 
arquivo de origem. Você pode fazer alterações em um documento e esse sempre será editável, 
mesmo se escolher exportar o documento para outro formato como o JPEG. 
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Seguir as próximas etapas 


As tarefas necessárias para criar gráficos no Fireworks foram completadas. Você aprendeu como 
criar e salvar um novo documento e como adicionar objetos vetoriais e gráficos de bitmap ao 
documento. Além disso, aplicou efeitos ao vivo, trabalhou com camadas, criou uma máscara e 
adicionou texto. Finalmente, aprendeu a exportar o gráfico concluído. 


Para obter informações sobre qualquer recurso mencionado neste tutorial e informações sobre 
recursos adicionais do Fireworks, consultar o índice de Usando o Fireworks ou pesquisar os tópicos 
da Ajuda do Fireworks. Para mais tutoriais do Fireworks, visitar o site da Macromedia na Web, em 
http://www. macromedia.com/br/. Certificar-se de visitar o premiado Centro de suporte da 
Macromedia, em http://www.macromedia.com/br/support/. 


Para aprender como usar o Fireworks na criação de páginas da Web interativas, consultar “Tutorial de 
princípios básicos do projeto da Web” na página 43. Você usará a imagem JPEG exportada deste 
documento e a importará na página da Web. Além disso, aprenderá a criar interatividade na Web 
como botões, rollovers e menus pop-up. 
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CAPÍTULO 2 
Tutorial de princípios básicos 
do projeto da Web 


Este tutorial irá orientá-lo nas tarefas básicas para execução de um projeto gráfico e interativo para 
Web com o Macromedia Fireworks MX. Você adquirirá experiência na prática usando o aplicativo 
gráfico da Web, líder no seu segmento, e aprenderá os conceitos de um projeto de Web enquanto 
treina. 


O que você aprenderá 


Neste tutorial, você vai repetir um fluxo de trabalho de produção típico do Fireworks para o 
projeto de uma página da Web. Você aprenderá o seguinte: 


e Cópia da pasta Tutorials 

e Exibir a página da Web concluída 

e Abertura do arquivo de origem 

* Importação de um gráfico 

e Divisão do documento 

e Criação de um rollover de arrastar e soltar 

e Criação e edição de um botão para criar uma barra de navegação 
e Criação e edição de um menu pop-up 

e Otimização do documento 

e Exportação de HTML 


* “Teste do arquivo concluído 


O que você deve saber 


Antes de iniciar este tutorial, é necessário estar familiarizado com a criação de imagens gráficas no 
Fireworks ou em outros aplicativos gráficos de bitmap ou vetoriais. Além disso, precisa possuir as 
habilidades básicas descritas no Fireworks “Tutorial de princípios básicos do projeto gráfico” na 
página 15. Em especial, você deve saber como realizar as seguintes tarefas no Fireworks: 


* Salva de um documento 
* Seleção de um objeto 
* Edição de uma propriedade de objeto 


e Exibição e utilização de um painel 
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Como trabalhar com camadas e objetos 
Criação e edição de texto 


Exportação de gráfico 


Cópia da pasta Tutorials 


Antes de mais nada, fazer uma cópia da pasta Tutorials, para salvar os resultados do seu trabalho 
permitindo, assim, que você ou outro usuário possa concluir o tutorial em uma outra oportunidade, 
usando os arquivos originais. 


Se tiver concluído o tutorial Princípios básicos do projeto gráfico, você já terá feito uma cópia da 
pasta Tutorials, portanto pode ignorar esta etapa. 


1 


2 


Navegar até a pasta do aplicativo Fireworks no disco rígido. 

Nota: Se não conseguir exibir a pasta do aplicativo Fireworks, talvez tenha acesso limitado aos arquivos do 
sistema. É possível fazer o download dos arquivos necessários ao tutorial no Centro de suporte Fireworks na 
Web em http:/Avww.macromedia.com/br/support/. 


Arrastar uma cópia da pasta Tutorials para o espaço de trabalho. 


Exibir a página da Web concluída 


A seguir, exibirá o arquivo do tutorial concluído para ver como o projeto terminado aparecerá 
depois de exportá-lo como um arquivo HTML. 


1 
2 


Iniciar o navegador da Web. 


No disco rígido, navegar até a pasta Tutorials, copiada no espaço de trabalho, e procurar 
Tutorial2/Complete. 

Nota: Algumas versões do Microsoft Windows ocultam, por padrão, as extensões dos tipos de arquivos 
conhecidos. Se essa configuração não tiver sido alterada, então os arquivos existentes na pasta Complete não 
exibirão as extensões. Na manipulação de gráficos e páginas da Web, é preferível visualizar as extensões dos 
arquivos. Para informações sobre como exibir novamente as extensões de arquivos, consultar a Ajuda do 
Windows. 

Selecionar o arquivo final.htm e arrastá-lo para uma janela aberta do navegador. 


Para o tutorial, você concluirá uma versão parcialmente terminada desta página da Global, uma 
locadora de carros. 


Mover o ponteiro sobre a imagem grande Vintage. 


Quando o ponteiro mover sobre a imagem Vintage, uma outra imagem na página será alterada. 
Isso é denominado um rollover desarticulado. 


Mover o ponteiro pela barra de navegação no topo da página da Web. Os botões são alterados 
em função da passagem do ponteiro sobre eles. Clicar no botão Rates para testar o link. 


O link leva você à pagina do Fireworks, em http://www.macromedia.com/br/, mas será 
necessário digitar seu próprio URL para esse e outros itens ao concluir o tutorial. 


Usar o botão Voltar do navegador para retornar à página final.htm. 


Mover o ponteiro sobre a imagem Worldwide Airports. Um menu pop-up será exibido. Fazer 
um rollover com o ponteiro sobre cada item do menu, inclusive sobre o primeiro item, que 
contém um submenu. 


Clicar em United States para testar o link, depois retornar à página final.htm. 
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9 Ao concluir a exibição da página da Web, poderá fechá-la ou deixá-la aberta para referência 
conforme seguir no tutorial. 


Nota: A pasta Complete também inclui o documento do Fireworks a partir do qual o arquivo HTML é gerado. 
Para exibir o documento, clicar duas vezes em final.png. 
Abertura do arquivo de origem 
Você exibiu o arquivo final.htm em um navegador; agora, está pronto para iniciar seu projeto. 
1 No Fireworks, selecionar Arquivo > Abrir. 
2 Navegar até a pasta Tutorials no espaço de trabalho. Procurar Tutorial2/Start e abrir global.png. 


Nota: Durante a execução do tutorial, lembrar-se de salvar o trabalho com frequência selecionando Arquivo > Salvar. 


Importação de um gráfico 
Agora que você já abriu o projeto não concluído da página Global na Web, importar um gráfico. 


Se tiver concluído o tutorial Princípios básicos do projeto gráfico do Fireworks, usará o JPEG que 
você criou. Se não tiver executado este tutorial, existe uma imagem concluída para você. 


1 Selecionar Arquivo > Importar e executar uma das ações a seguir: 


* Se tiver concluído o tutorial Princípios básicos do projeto gráfico, procurar a pasta Tutoriall/ 
Export. 


* Senão tiver concluído o tutorial Princípios básicos do projeto gráfico, procurar a pasta Tutorial2/ 


Assets. 

2 Selecionar vintage.jpg e clicar em Abrir. 

3 Clicar em qualquer lugar da área branca e vazia da tela. 
A imagem é exibida, selecionada. 


4 Arrastar a imagem para que fique posicionada conforme mostra a ilustração a seguir. 


BUTTON TEXT 
CAR RENTALS 


z 
CHOOSE AIRPORT LOCATION N 1 nta e 
CLASSIC RENTALS 


Indulce yourself by traveling in a Vintage 
dassic auiomcbie, with a chauffeur to 
whisk you tc any destination. 


Great 
WEEKEND 
AS LOWNAS $9-DAY 


TIBLE - LIMOUSINE - ANTIQUE - NEO-CLASSIC - =XOTIG - ROADSTER 
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Divisão do documento 


Os designers da Web usam um processo denominado fatiamento para recortar documentos da 
Web em pequenas partes, por uma série de motivos. Imagens menores são transferidas de modo 
mais rápido na Web, desta forma os usuários podem observar o carregamento da página aos 
poucos em vez de esperar a transferência de uma imagem enorme. Além disso, o fatiamento 
viabiliza a otimização de várias partes de um documento de modo diferente. O fatiamento 
também é necessário para introduzir interatividade. 


Aqui, você irá criar fatias para alguns dos elementos gráficos da página da Web. Posteriormente, 
introduzirá interatividade a essas fatias, além de definir configurações de compactação e 
otimização para elas. 


1 Com a imagem Vintage ainda selecionada, selecionar Editar > Inserir > Fatia. 


Uma fatia é inserida no topo da imagem. Por padrão, as fatias possuem uma sobreposição verde. 


2 Clicar em qualquer lugar fora da fatia para cancelar a seleção. 


As guias de fatia vermelhas definem a fatia, estendendo a altura e a largura do documento. 
Quando tiver criado a fatia, o Fireworks dividirá automaticamente o restante do documento. 


Nota: Se você não visualizar as guias de fatia vermelhas, selecionar Exibir > Guias de fatia. 


3 Clicar com a tecla Shift no gráfico Worldwide Airports e no gráfico Great WEEKEND Rates 
no lado esquerdo do documento, para selecionar os dois ao mesmo tempo. 


4 Selecionar Editar > Inserir > Fatia. Na caixa de mensagem que é exibida, selecionar Múltiplos. 
Isso permite a inserção de várias fatias ao mesmo tempo. 


As fatias são inseridas no topo de cada um dos gráficos selecionados. A adição de outras fatias 
altera o layout de fatias automáticas no restante do documento. 


CHOOSE AIRPORT LOCATION 
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5 Clicar em qualquer lugar fora das fatias para cancelar a seleção. 


Existe agora um espaço entre as fatias Vintage e Great WEEKEND Rates. Esta é uma fatia 
automática fina. 


6 Colocar o ponteiro sobre a guia da fatia esquerda da imagem Vintage. 


O ponteiro é alterado para um ponteiro Movimento de guia, indicando que você pode clicar na 
guia de fatia e arrastá-la. Com o arraste da guia de fatia, é possível alterar a forma de uma fatia. 


7 Arrastar a guia de fatia para a esquerda até encaixar na guia de fatia da direita, na imagem Great 
WEEKEND Rates, como mostrado na ilustração a abaixo. 


8 Soltar o botão do mouse. 


A fatia Vintage agora se estende por toda a borda da fatia Great WEEKEND Rates e a fatia 
automática mínima é excluída. Considerar a fatias como células de uma tabela em um 
aplicativo de planilhas ou processador de textos. Se você arrastar as guias para redimensionar 
uma fatia no Fireworks redimensionará as outras fatias, da mesma forma que se arrastar as 
bordas da célula de uma tabela redimensionará todas as outras células da tabela. Se você arrastar 
uma guia de fatia sobre a fatia automática ou ultrapassá-la, as guias de fatia serão mescladas e as 
fatias automáticas desnecessárias serão excluídas. 
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9 Seo painel Camadas estiver minimizado ou invisível, clicar na seta expansora ou selecionar 
Janela > Camadas. 


No topo do painel está a Camada da Web. Ela contém todos os objetos da Web de um 
documento. As três fatias criadas estão listadas aqui. A Camada da Web é sempre a camada 
mais acima de qualquer documento. Ela não pode ser movida, renomeada ou excluída. 


Normal [v 
E Camada da Web | | 


= | Fatia 


Fa Fatia 


Fatia 


= 
999 9|* 


| 


Bitmap 


Global logo 


Button graphic 


Logon 


Worldwide Airports 


Locations 


Great Weekend Rates 


Header 


w a i 


Criação de um rollover de arrastar e soltar 


Depois de ter fatiado seu documento, agora está na hora de adicionar interatividade. Você irá usar 
duas das fatias inseridas na etapa anterior para criar um rollover de arrastar e soltar. 


Há dois tipos de rollovers: simples e desarticulados. Um rollover simples exibe uma imagem 
diferente quando o ponteiro passar sobre ele em um navegador da Web. Um rollover 
desarticulado faz com que outra imagem seja alterada em uma parte diferente da tela quando o 
ponteiro passar sobre ela. Aqui, você irá criar um rollover desarticulado. 


1 Selecionar a fatia que cobre a imagem Vintage. 


O ícone redondo no centro da fatia é denominado alça de comportamento. Ele permite a 
introdução de comportamentos, ou interatividade, em uma fatia. Se estiver familiarizado com 
o Macromedia Dreamweaver, identificará diversos desses comportamentos no Fireworks. 


Alça de comportamento 
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Os comportamentos também podem ser aplicados usando o painel Comportamentos. Mas, 
para obter uma interatividade simples como os rollovers, a alça de comportamento de fatia 
representa um método mais rápido e fácil de aplicar um comportamento. 


2 Arrastar a alça de comportamento na fatia Great WEEKEND Rates e liberar o botão do mouse. 


Trocar imagem de: 


Moldura 2 v 
C 


Uma linha de comportamento azul se estende da alça de comportamento até o canto da fatia, e 
a caixa de diálogo Trocar imagem é exibida. 


3 Certificar-se de que a Moldura 2 esteja selecionada no menu pop-up Trocar imagem de, e clicar 


em OK. 


Quando o ponteiro passar sobre a fatia Vintage em um navegador, uma imagem da Moldura 2 
substituirá a imagem Great WEEKEND Rates. A imagem Vintage é considerada a acionadora 
do efeito rollover, e a imagem que substituir a imagem Great WEEKEND Rates é considerada a 
imagem trocada. 


4 Seo painel Molduras estiver minimizado ou não estiver visível, clicar na seta expansora do 
grupo de painéis Molduras e Histórico e clicar na guia Molduras, ou selecionar Janela > 
Molduras. 


9, F Para sempre 


O painel Molduras lista as molduras disponíveis no documento atual. No momento, existe 
apenas uma moldura no documento. Em geral, o painel Molduras é usado em animação. No 
caso de rollovers, ele é usado para manter a troca de imagens. 
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5 Clicar no botão Moldura nova/duplicada na base do painel. 


Uma nova moldura é criada no painel Molduras, denominada Moldura 2. Agora, o espaço de 
trabalho está vazio, exceto quanto às fatias inseridas. 


Não há objetos listados no painel Camadas, com exceção do conteúdo da Camada da Web. 
Isso se deve ao fato de que, por padrão, as camadas no Fireworks não são compartilhadas em 
todas as molduras, com exceção da Camada da Web, que sempre é compartilhada. Os objetos 
na Camada da Web aparecem em cada uma das molduras do documento, assim sendo, 
qualquer alteração feita nesses objetos, como nas fatias, afetam todas as molduras. 


6 Selecionar Arquivo > Importar e navegar até a pasta Tutorial2/Assets. Selecionar o arquivo 
denominado rates.gif e clicar em Abrir. 


7 Posicionar o ponteiro de inserção sobre a fatia em que estava localizada a imagem Great 
WEEKEND Rates na Moldura 1. Alinhar o ponteiro da melhor forma possível com o canto 
superior esquerdo da fatia. 
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8 Clicar para inserir a imagem. 


A imagem Vintage Classic Rates é exibida. 


inté 
CLASSIC 


9 Clicar na guia Visualização no topo da janela do documento, e ocultar as fatias do documento 
clicando no botão Ocultar fatias e pontos ativos na seção Web do painel Ferramentas. 


Mover o ponteiro sobre a imagem Vintage. A imagem Great WEEKEND Rates será alterada 
quando o ponteiro passar sobre a imagem Vintage. 


Dica: Se parecer que a imagem salta um pouco ou que a transição entre as imagens não está suave, ajustar a 
posição da imagem trocada na Moldura 2 enquanto estiver na exibição Original. Para obter um posicionamento 
preciso, ativar Onion Skinning no painel Molduras, ou verificar se as coordenadas X e Y da imagem Vintage 
Classic Rates são as mesmas que as da imagem Great WEEKEND Rates no Inspetor de propriedades. Quanto 
tiver terminado, retornar à Moldura 1 e, se necessário, desativar Onion Skinning. Para mais informações sobre 
essas opções, consultar o índice de Usando o Fireworks ou pesquisar a Ajuda do Fireworks. 


10 Depois de concluído, clicar na guia Original no topo da janela do documento para retornar à 
exibição normal, e voltar as fatias à posição inicial clicando no botão Mostrar fatias e pontos 
ativos no painel Ferramentas. 


Você criou um rollover desarticulado com sucesso. Os rollovers simples são criados de modo 
semelhante: quando arrastar a alça de comportamento de uma fatia como na etapa 2, você 
simplesmente a arrasta de volta para a mesma fatia. 


Em geral, os designers da Web adicionam efeito rollover a uma imagem para oferecer aos usuários 
uma dica visual de que é possível clicar na imagem. Se o site da Global na Web fosse um site real 
da Internet, provavelmente seria conveniente que as imagens Vintage e Descontos tivessem um 
link para páginas que oferecessem mais informações. Para fins deste tutorial, deixar o rollover 
desarticulado como está. Na próxima seção, você ganhará muita prática sobre como anexar links a 
outros objetos da Web. 


Criação e edição de um botão para criar uma barra de navegação 


Os botões são objetos da Web com link para outras páginas da Web. Normalmente, a aparência 
deles é alterada em função do movimento do mouse ou de outra ação do usuário, como clicar, 
como uma dica visual que indique interatividade. Por exemplo, um botão exibe um efeito rollover 
diferente quando o ponteiro passa sobre ele; diferente de quando se clica nele. 


Uma barra de navegação é constituída de uma série de botões que aparecem em uma ou mais 
páginas de um site da Web. Em geral, os botões de uma barra de navegação têm a mesma 
aparência, com exceção do texto. 


Aqui, você irá criar uma barra de navegação para o site da Global na Web. 
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Criação de um símbolo de botão 


O gráfico inicial e o texto do botão já foram criados. Você converterá esse gráfico em um símbolo 
de botão. 


1 No Fireworks, selecionar o gráfico do botão (intitulado BUTTON TEXT) no canto superior 
esquerdo do documento. 


2 Selecionar Modificar > Símbolo > Converter em símbolo. 
A caixa de diálogo Propriedades do símbolo é exibida. 


3 Digitar My button na caixa de texto Nome, selecionar Botão como o tipo de símbolo e clicar 


em OK. 


Propriedades do símbolo 


Nome: My Button 
Tipo: O Gráfico 
O Animação 
®© Botão 


Uma fatia aparece no topo do gráfico do botão e um ícone de atalho aparece à esquerda da 
fatia. Isso indica que a seleção no espaço de trabalho é uma ocorrência do símbolo recém- 
criado. Os símbolos são como cópias mestra de seus gráficos. Quando você alterar um símbolo, 
todas as ocorrências desse símbolo no seu documento serão automaticamente alteradas. Os 
símbolos estão na biblioteca. 


4 Seo painel Biblioteca estiver minimizado ou não estiver visível, clicar na seta expansora do 
grupo de painéis Propriedades e clicar na guia Biblioteca, ou selecionar Janela > Biblioteca. 


Seu símbolo está listado no painel Biblioteca. 


BUTTON TEXT 


Data da mo... 
# My Button 0242102 21:10:33 
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Criação de um estado de botão 


A seguir você criará vários estados para um símbolo de botão. Os estados de botão são formas 
diferentes de exibição de um botão quando houver um rollover ou quando for clicado em um 


navegador da Web. 
1 Clicar duas vezes na ocorrência de botão criada. 


Dica: Uma outra alternativa é clicar duas vezes para visualizar o botão no painel Biblioteca ou no ícone da pasta 
do lado dele na lista de símbolos do painel Biblioteca. 


O Editor de botão é aberto com o gráfico de botão exibido no espaço de trabalho. 


A My Button @ 100% 


Acima | Sobre | Abaixo | Sobre durante o estado Abaixo Área ativa 


BUTTCH TEXT 


Instruções: 
Estado acima: estado normal do botão. Use as ferramentas de desenho e edição para criar o estado 
Acima do botão. Para editar vínculos ou comportamentos, primeiro selecionar a guia da área ativa. 


Importar um botão... Concluído 


2 Clicar nas guias no topo do Editor de botão. 


As quatro primeiras guias representam os estados de botão. A última guia, Área ativa, 
representa a área ativa do botão, ou o local em que o usuário deve clicar ou fazer um rollover 
para os estados de botão serem ativados. A área ativa também representa a área de troca do 
botão, ou a área que é alterada a cada estado do botão. No momento, não há estados para o 
símbolo do botão, exceto o Estado acima, estado do botão antes de ser feito um rollover ou de 
ser clicado. 


3 Clicar na guia Sobre no topo do Editor de botão, depois clicar no botão Copiar gráfico acima. 


O gráfico de botão é copiado a partir da guia Acima. O estado Sobre de um botão é a aparência 
que ele assume quando o ponteiro passar sobre ele. Para proporcionar aos usuários avaliação 
visual, você irá alterar a cor do retângulo atrás do texto. 


4 Selecionar o retângulo. Certificar-se de selecionar o retângulo e não o texto; se estiver em 
dúvida sobre qual deles está selecionando, verificar o painel Camadas para visualizar o 
retângulo selecionado. 
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5 Clicar na caixa Cor de preenchimento no Inspetor de propriedades e selecionar preto como cor. 


Agora, o retângulo está preto. 
6 Clicar na guia Abaixo no topo do Editor de botão, e clicar no botão Copiar gráfico sobre. 


O gráfico de botão é copiado a partir da guia Sobre. O estado Abaixo é a aparência do botão 
depois de ter sido clicado. Desta vez você não vai mudar a cor do retângulo; irá deixá-la como 
está. 


7 Clicar em Concluído no Editor de botão para aplicar as alterações ao símbolo de botão. 

8 Clicar na guia Visualização na janela do documento e testar os estados do botão. Se necessário, 
desativar as fatias. Depois de concluído, clicar na guia Original e voltar as fatias à posição 
inicial. 

Criação de várias ocorrências de botão 

Em seguida, criará mais ocorrências do símbolo de botão. 

1 Selecionar o botão no espaço de trabalho se ainda não estiver selecionada. 

2 Selecionar Editar > Clonar. 

Uma nova ocorrência do botão aparece no topo do botão original. 


3 Manter a tecla Shift pressionada enquanto pressiona a tecla Seta à direita várias vezes para 
mover a nova ocorrência para a direita. 


Isso move a ocorrência a incrementos de 10 pixels. Se necessário, usar as teclas de seta sozinhas 
para mover a seleção um pixel de cada vez. Posicionar a ocorrência para a direita da ocorrência 
original, mas sem sobreposição, como mostrado na ilustração a seguir. 


4 Clonar mais duas ocorrências do botão e posicionar cada um delas à direita da ocorrência 
anterior. 


Dica: Como atalho, pressionar Alt (Windows) ou Opção (Macintosh) durante o arraste da ocorrência 
selecionada com o ponteiro para criar uma cópia. Depois de posicionar a nova ocorrência à direita da ocorrência 
anterior, selecionar Editar > Repetir duplicar, para criar e colocar automaticamente uma outra cópia da 
ocorrência. 
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Alteração do texto de ocorrência de botão 


Agora que já criou todos os botões para sua barra de navegação, é necessário dar um texto 
exclusivo para cada um. É possível alterar com facilidade o texto em uma ocorrência de botão 
usando o Inspetor de propriedades. 


1 Selecionar a ocorrência de botão na extrema esquerda. 


As propriedades da ocorrência de botão aparecem no Inspetor de propriedades. Com exceção 
do menu pop-up Configurações de exportação, essas propriedades são aplicadas apenas à 
ocorrência selecionada. Alterações feitas neste local não afetarão o símbolo de botão original na 


Biblioteca. 
= Botão Tento: [TEXT BUTTON | Link v| O 
| [global te 12 MON | GIF WebSnap 128 v Alt: 
| r = TT 
w[i | xl H100% | Normal x) Destino: v] 
| Hls | w/39 [C] Mostrar Abaixo ao carregar a 


2 No Inspetor de propriedades, substituir o texto da caixa Texto com a palavra HOME em caixa 
alta. Em seguida, pressionar Enter. 


O texto no botão é alterado para refletir sua entrada. 


3 Nos três botões restantes, alterar o texto do botão para VEHICLES, RATES e CONTACT 
US, respectivamente. 


Atribuir URLs aos botões 


A seguir, irá atribuir um URL exclusivo, ou um link, a cada ocorrência de botão. Um URL, ou 
Uniform Resource Locator, é o endereço ou o local de uma página na Web. É possível atribuir 
com facilidade URLs a botões usando o Inspetor de propriedades. 


1 Selecionar a ocorrência de botão entitulada Home. 


2 Digitar index.htm na caixa de texto Link do Inspetor de propriedades. 


Link: | index.htm vi © 


Alt: 


Quando clicado em um navegador da Web, o botão Home irá para a página denominada 
index.htm. Você descobrirá posteriormente neste tutorial porque fez um link no botão Home 
com esta página. 
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3 Selecionar a ocorrência de botão Veículos e inserir o URL favorito na caixa de texto Link do 


Inspetor de propriedades. 


Link: http:ftwwwmacromedia.com v © 


Alt: 


Para fins deste tutorial, qualquer URL serve. Se estivesse criando um site da Web de verdade, 
teria que digitar o URL para o local de destino do botão Veículos. 


Nota: Certificar-se de digitar o URL de um site real da Web, para poder testar os vínculos do botão 
posteriormente. 


4 Atribuir um URL a cada uma das demais ocorrências de botão. Novamente, qualquer URL que 


funcione serve. 


Selecionar Arquivo > Visualizar no navegador > Visualização em [seu navegador preferido]. 
Para testar os vínculos do botão, é necessário visualizar o documento em um navegador. 


Nota: Se o navegador não estiver listado, é necessário selecionar primeiro um navegador escolhendo Arquivo > 
Visualizar no navegador > Definir navegador primário. 


Quando o documento for aberto no navegador, testar os botões criados. Exceto pelo botão 
Home, que está vinculado a um arquivo que ainda não foi criado, cada botão deve ir para o 
link especificado no Fireworks. 


Edição do símbolo de botão 


A seguir, você modificará o símbolo de botão original. As alterações realizadas serão aplicadas 
automaticamente a todas as ocorrências de botão na barra de navegação. 


Talvez esteja pensando na aparência do símbolo de botão original, uma vez que o texto foi 
alterado em diversas ocorrências. 


1 


Clicar duas vezes em qualquer das ocorrências de botão no espaço de trabalho. 


O Editor de botão é aberto com o símbolo e o texto de botão original exibido no espaço de 
trabalho. O símbolo de botão original ainda está intacto e exibe o texto original. 


Na alteração do texto de cada botão do espaço de trabalho, você só editou as ocorrências de 
botão. Aqui, se fizer alguma alteração no retângulo ou na aparência do texto, você estará editando 
o símbolo original, assim sendo, essas alterações serão refletidas em todas as ocorrências do 
espaço de trabalho. 


Clicar na guia Sobre. 
Selecionar o retângulo preto. 


Clicar na caixa Cor de preenchimento no Inspetor de propriedades e digitar FF6633 como 
valor da cor. Pressionar Enter para aplicar a alteração da cor. 


Agora, o retângulo está laranja. 
Clicar em Concluído no Editor de botão para aplicar a alteração ao símbolo de botão. 
Clicar na guia Visualização na janela do documento e testar os botões. 


Agora, cada estado de botão Sobre está laranja. Você só alterou o símbolo de botão, mas a 
alteração foi aplicada a todas as ocorrências de botão na sua barra de navegação. 
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7 Clicar na guia Original, e clicar duas vezes em qualquer ocorrência de botão no espaço de 
trabalho. Desta vez você alterará o texto no símbolo de botão. 


8 Selecionar o texto do botão no Editor de botão, e no Inspetor de propriedades escolher Arial 
como o tipo de fonte. Fazer isso em cada estado de botão. 


Texto 


S © 


[Button tex ] 


Iv PÁ 4, | Suavizar sertlhado v| 


wfs | w[32 | 


aje | va | [nx] .= [0 


{v Kern automático Paz 


9 Clicar duas vezes no bloco de texto no Editor de botão e excluir a palavra BUTTON. 


10 Clicar em Sim na caixa de mensagem que solicita se deseja alterar o texto nos outros estados de 
botão. 


Examinar os vários estados de botão no Editor de botão. O texto é alterado em um estado que 
se reflete em todos os estados de botão. Comparar isso com a fonte alterada; você teve que 
modificá-la em cada estado. Isso é porque se pode aplicar diferentes atributos de texto e gráfico 
a cada um dos estados de um botão. Isso é útil, por exemplo, se desejar que a cor do texto seja 
alterada quando o usuário fizer rollover em um botão. 


11 Clicar em Concluído para sair do Editor de botão. 


A fonte é alterada em cada ocorrência de botão para refletir a nova seleção de fonte, mas o texto 
permanece o mesmo. Ocorrências de botão refletem apenas as alterações feitas na aparência 
gráfica de um símbolo de botão, inclusive nos atributos de texto, mas não alterações feitas no 
texto propriamente dito. 


Símbolos de botão possibilitam a alteração da aparência gráfica de todas as ocorrências de 
botão em uma barra de navegação, enquanto preserva o texto exclusivo de cada uma das 
ocorrências. 


Criação e edição de um menu pop-up 


Menu pop-up é aquele que aparece quando se movimenta o ponteiro sobre uma imagem acionadora 
em um navegador. Ele contém uma lista de itens com links para outras páginas da Web. 


Aqui, você irá criar e editar um menu pop-up que lista os locais em aeroportos da Global. 


Criação de itens de lista de menu pop-up 
Primeiro criará os itens de lista do menu pop-up usando o Editor de menu pop-up. 


1 Selecionar a fatia que abrange a imagem Worldwide Airports. 


Tutorial de princípios básicos do projeto da Web 57 


2 Selecionar Modificar > Menu pop-up > Adicionar menu pop-up. 


O Editor de menu pop-up é aberto. 


Editor de menu pop-up 


Conteúdo | aparência | Avançada | Posição 


Destino 


Cancelar Voltai Próximo > Concluído 


3 Clicar duas vezes na caixa de texto no canto superior esquerdo (apenas no Windows). 


4 Digitar North America na caixa de texto e pressionar Enter. 


A caixa de texto seguinte está realçada, pronta para a criação de uma outra entrada. 


+ -= 


Link Destino 


Texto 
North America 


5 Digitar Europe e pressionar Enter. 
6 Criar mais três entradas para Africa, Middle East e Asia/Pacific. 


+ 


Testo Link Destino 


North America 


Middle East O 


AsiatPacifio O 
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7 Clicar duas vezes na caixa de texto Link para a entrada North America. 


8 Digitar um URL de sua escolha que funcione e pressionar Enter. 


Para fins deste tutorial, qualquer URL serve. Certificar-se de que seja um URL de verdade para 
poder testar os links posteriormente. 


+- p- 
Texto Link Destino 
North America http:# www. macromedia.com 


Europe 


Africa 


Middle East a 


AsialPacific 


9 Digitar os URLs para as entradas remanescentes. 


Nota: Sempre existe uma linha extra na base da lista de entradas no Editor de menu pop-up. Ela está lá para 
você adicionar novas entradas com facilidade, sem ter que clicar no botão Adicionar menu. 


10 Clicar em Concluído para fechar o Editor de menu pop-up. 


No espaço de trabalho, aparece um contorno do menu pop-up anexo à fatia. 


CHOOSE ARPERT LOCATION 


11 Para testar o menu pop-up, selecionar Arquivo > Visualizar no navegador > Visualização em 
[seu navegador preferido], para visualizar o documento em um navegador. 


Nota: Os menus pop-up devem ser visualizados em um navegador; eles não são visíveis ao usar a guia 
Visualização no Fireworks. 


Quando o documento for aberto no navegador, mover o ponteiro sobre a imagem Worldwide 
Airports. O menu pop-up criado será exibido. Clicar em todas as entradas para testar os links. 
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Personalização do menu pop-up 
A seguir, retornará ao Editor de menu pop-up para modificar a aparência do menu pop-up. 
1 No Fireworks, clicar duas vezes no contorno do menu pop-up. 
O Editor de menu pop-up é aberto exibindo suas entradas. 
2 Clicar no botão Próximo. 


A guia Aparência é exibida. Este é o local em que é possível alterar as cores e fontes usadas nos 
menus pop-up. 


Editor de menu pop-up 


Conteúdo | Aparência | Avançada | Posição 


Células: @) HTML (O) Imagem Menu vertical 


Fonte: | Verdana, Arial, Helvetica, sans-serif 


Tamanho: | 14 NII 
Estado Acima: Estado Sobre: 
Texto: E Célula: | Tento: 


North America 
ELpope 


Middle East 


Cancelar < Voltar Próximo > Concluído 


3 Selecionar HTML como tipo de célula e Menu vertical como alinhamento. 
4 Selecionar Arial, Helvetica, sans-serif como fonte e 12 como tamanho de fonte. 


5 Na seção Estado acima, definir a cor do texto como preto, se ainda não estiver selecionada. Em 
seguida, clicar na caixa Cor da célula. Se CCCCCC ainda não for exibido na caixa de texto no 


topo da janela pop-up de cores, digitar CCCCCC e pressionar Enter. 


Esses valores da cor representam as cores padrão selecionadas no Editor de menu pop-up se 
nunca tiver criado um menu pop-up. Depois de alterar essas cores, elas serão usadas sempre que 
você criar um menu pop-up, até outras cores serem escolhidas. 
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6 Na seção Estado sobre, definir a cor do texto como Branco, se ainda não estiver selecionada, e 
clicar na caixa Cor da célula. Clicar no ponteiro conta-gotas no retângulo azul da tela que 
circunda a imagem Worldwide Airports, como mostrado abaixo. 


7 Clicar no botão Próximo. 


A guia Avançada é exibida. A guia Avançada permite a alteração de várias propriedades de 
célula e borda. Aqui, poderá aumentar a largura da célula, fazendo com que o menu pop-up 
pareça mais largo. 


Editor de menu pop-up 


Conteúdo | Aparência | Avançada | Posição | 


Largura da célula: |O Automática 


v 
Altura da célula: | 20 Automática 4 


Preenchimento da célula: Recuo do texto: [o 


E 
7 

= 

jo |] 


Espaçamento entre as células: I Espera do menu: [ 1000 | 


Bordas pop-up: Mostrar bordas 


Largura da borda: ] Sombra: E 


Cor da borda: Realce: C] 


Middle East 


8 Selecionar Pixels no menu pop-up Largura da célula. 
Isso ativa a caixa Largura da célula. 


9 Digitar 137 como largura da célula. 
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10 Selecionar Automática no menu pop-up Altura da célula e clicar no botão Próximo. 


A guia Posição é exibida. Este é o local em que se pode especificar a posição da tela em que o 
menu pop-up aparecerá. Coordenadas de 0,0 significam que o canto esquerdo superior do 
menu pop-up será alinhado com o canto esquerdo superior da fatia que o aciona. Existem 
também diversas posições predefinidas à escolha. 


Editor de menu pop-up 


Conteúdo | Aparência | Avançada Posição | 


Posição do menu: 


g E 


Posição do submenu: 


EEE 


5 Yi]? 


[C Colocar na mesma posição 


Cancelar < Voltar Concluído 


11 Digitar 3 nas caixas de Posição de menu X e Y, depois clicar em Concluído. 
Nota: Também é possível reposicionar um menu pop-up arrastando seu contorno no espaço de trabalho. 
12 Visualizar as alterações do menu pop-up em um navegador. 


Mover o ponteiro sobre a imagem Worldwide Airports. O menu pop-up está posicionado de 
forma diferente e aparece mais largo. Fazer um rollover sobre cada entrada do menu para 
verificar as alterações de cor. 


Edição do menu pop-up 


A seguir, usará o Editor de menu pop-up novamente para adicionar outra entrada ao menu pop- 
up. Além disso, alterará a ordem das entradas e adicionará um submenu. 


1 No Fireworks, clicar duas vezes no contorno do menu pop-up. 
2 Clicar na entrada Europe para selecioná-la. 
[+] 3 Clicar no botão Adicionar menu, acima da lista de entradas. 


Uma linha branca é inserida. 
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4 Clicar duas vezes no campo Texto da nova entrada e digitar Latin/South America. Clicar em 
qualquer lugar fora do campo Texto para aplicar a entrada. 


Texto Link Destino 
North America http:Hwww.macromedia.com | 
Europe http: macromedia.com 


LatinfSouth America 


Africa http:H www. macromedia.com OOo O 


Middle East http:#www.macromedia.com 
BsialPacific http: www. macromedia.com 


As Américas não estão juntas na lista. 


5 Arrastar a entrada Latin/South America uma linha para cima e soltar o botão do mouse. Durante 
o arraste, uma linha preta indica o local em que a entrada será colocada se você liberar o botão do 
mouse naquele ponto. 


A entrada é colocada no local especificado. 


Texto Link Destino 
North America http:Hwww.macromedia.com 


LatinfSouth America 
http:Hwww.macromedia.com Do 
Africa http:Hwww.macromedia.com Do 


Middle East hittp:ttwwy macromedia.com 
AsialPacific http:Hwww.macromedia.com 


6 Selecionar a entrada North America e clicar no botão Adicionar menu. 


7 Clicar duas vezes no campo Texto da nova entrada e digitar United States. Depois, clicar em 
qualquer lugar fora dos campos de entrada. Porém, cuidado para não selecionar outra entrada. 


8 Selecionar a entrada United States se ela ainda não estiver selecionada e clicar no botão Recuar 
menu. 


A entrada é recuada abaixo da entrada North America. 


Texto Link Destino 


North America http:# www. macromedia.com 


United States 


LatinfSouth America a 
http:# www. macromedia.com Do 


Africa http:#www.macromedia.com 
Middle East http:# www. macromedia.com 
AsialPacific http:Hwww.macromedia.com Do 
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9 Clicar novamente no botão Adicionar menu e criar uma nova entrada para o Canada. 


Acaba de ser criado um submenu que será exibido quando se fizer um rollover na entrada 
North America em um navegador. 


Testo Link Destino 


North America http:Hwww.macromedia.com 


United States 
LatintSouth America 
Europe http: www.macromedia.com 
http: www. macromedia.com 
Middle East http:Hwww.macromedia.com 
AsialPacific http: www. macromedia.com 


10 Atribuir URLs a todas as novas entradas. Opcionalmente, é possível excluir o link para a North 
America, pois os usuários escolherão itens do submenu. 


1 Clicar em Concluído para fechar o Editor de menu pop-up, e depois visualizar as alterações do 
menu pop-up em um navegador. 


Otimização do documento 


O documento está quase pronto para a Web. A única ação que você precisa tomar antes de 
exportar o documento é otimizá-lo. Antes de exportar qualquer documento do Fireworks, sempre 
é necessário otimizá-lo. A otimização assegura que os gráficos serão exportados com o melhor 
equilíbrio possível de compactação e qualidade. 


Quando diferentes tipos de gráficos encontram-se no mesmo documento, é aconselhável escolher 
uma configuração de compactação e formato de arquivo apropriado para cada um. A página da 
Global na Web é composta por vários elementos: bitmaps, objetos vetoriais e texto. 


1 Seo painel Camadas estiver minimizado ou invisível, clicar na seta expansora ou selecionar 
Janela > Camadas. 


Configuração: | GIF WebSnap 128 V| + — 


GIF v| Mate: 


webSnap adaptativa | Cores: 128 v] 


Perda: [ 0 | E Pontil: ox |w 


Sem transparência v | 


Classificar por: Nenhum v| 
ER Eeº Eat E] 
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y 


O Fireworks escolhe o formato de arquivo GIF como o padrão de exportação e Websnap 
adaptiva como a paleta de cores padrão. A maioria dos gráficos da página da Global Rental 
Cars na Web ficará perfeita com essas configurações. No entanto, a imagem bitmap Vintage 
contém uma fotografia e um dégradé. Devido à complexa variação de cores, será melhor 
exportá-la em outro formato. 


Clicar na guia Visualização 2 para cima na janela do documento. 


| Original || Visualização | 2paracima | 4 paracima, 


A guia 2 para cima permite a exibição dos resultados das configurações de otimização e as 
compara com o original. Agora, você já deve ter percebido que a fatia branca é sobreposta 
sempre que uma das guias Visualização for exibida. A sobreposição permite que se enfoque 
apenas a área a ser otimizada. 


Clicar na fatia da imagem Vintage na visualização à direita. 


A sobreposição da fatia desaparece, assim é possível exibir a imagem abaixo da fatia. Na base da 
visualização, é exibido o formato do arquivo de exportação da fatia selecionada, assim como o 
tamanho aproximado do arquivo de exportação e o tempo de transferência do gráfico na Web. 


| Original | Visualização | 2paracima | 4para cima [24 


RATES CONTACT US 


Indulge yourself by 
classic automobi 
whisk y 


BLE - LIMOUS 


Original: global_31png - GIF (Fatim) ~ 0% pontilhamento 
336,10K 3709K Adaptativa 
5 seg a 56kbps 128 cores 


Mo Dot 4 ob © | 770 [w + 15 SA MD 


Dica: Usar a ferramenta Mão na seção Exibir do painel Ferramentas, para exibir mais partes da imagem, caso 
não esteja totalmente visível. 


Ocultar as fatias por um instante clicando no botão Ocultar fatias e pontos ativos na seção Web 
do painel Ferramentas. 


Isso permite a comparação da visualização com o original e a verificação das diferenças entre os 
dois gráficos. A visualização da direita possui faixas no dégradé. 


5 Voltar com as fatias novamente e clicar na imagem Vintage com a ferramenta Ponteiro. 
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6 No painel Otimizar, escolher JPEG - menor arquivo no menu pop-up Configurações. 


Configuração: | JPEG - Melhor q e 


v Padrões de exportação 


GIF Web 216 80 
GIF WebSnap 256 30 
GIF WebSnap 128 
GIFAdaptive256 


JPEG - Arquivo menor N 


GIF Animado Websnap 128 


0 cores 


am 


Classificar por: Nenhum 
ema 


As faixas de dégradé agora desapareceram e o tamanho do arquivo diminuiu 
consideravelmente. Isso é porque as fotografias e as imagens com variações de cores complexas 
estão melhor otimizadas e compactadas como JPEGs do que como GIFs. 


Agora que o tamanho do arquivo diminuiu, a imagem ficou confusa. 


| Original | Visualização 2paracima | 4 paracima | [E ada 


CONTACT US 


Original:Sem título | JPEG (Fatia, mi) ~ 60 qualidade 
326.99K 13.73K 
2 seg a 56kbps 


Mo ÞM 1 4 ib © | 707340 |100% + 


7 Para melhorar a aparência do bitmap, arrastar o controle deslizante Qualidade no painel 
Otimizar para 77 e definir a opção Suavização como 0. 


O bitmap está muito mais nítido, mas, também, o tamanho do arquivo aumentou. No 
entanto, isso ainda representa uma melhora no tamanho do arquivo quando a comparamos 
com a imagem otimizada como GIF. 


8 Clicar na guia Original para retornar à exibição normal. 
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Exportação de HTML 


HTML (HyperText Markup Language, linguagem de marcação de hipertexto) é o principal 
método utilizado na Internet para criar e exibir páginas da Web. Não é necessário conhecer 
HTML para usar o Fireworks, mas isso ajuda a entender que as fatias do Fireworks se 
transformam em células em uma tabela HTML quando exportadas. 


Aqui, você irá exportar e exibir o documento finalizado em um navegador da Web. Além disso, 
também examinará o código HTML exportado pelo Fireworks. 
Definição de preferências HTML 
Antes de exportar o documento, é necessário definir as preferências de exportação HTML. 
1 Selecionar Arquivo > Configuração do HTML. 


A caixa de diálogo Configuração do HTML é exibida. As opções definidas nesta caixa de 
diálogo afetarão todos os próximos documentos criados no Fireworks, exceto as opções 
existentes na guia Específico do documento. 


Configuração do HTML 


Geral | Tabela | Específico do documento 


Estilo do HTML : Dreamweaver HTML 


Extensão : .htm ” 


[C] Incluir comentários HTML 


C] Nome de arquivo em minúsculas 


2 Na guia Geral, selecionar um estilo HTML. 


Se usar um editor de HTML como o Macromedia Dreamweaver ou o Microsoft FrontPage, 
você deve selecioná-lo neste menu pop-up. Fazendo isso poderá abrir e editar com facilidade o 
arquivo exportado nesse editor de HT'ML. Se não usar um editor de HTML ou se utilizar um 
que não esteja listado, selecionar HT'ML genérico. 


3 Selecionar .htm como a extensão de arquivo. 
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4 Clicar na guia Tabela. 
A guia Tabela permite a alteração das propriedades da tabela HTML. 


Configuração do HTML 


| Geral | Tabela | Específico do documento | 


Espaçar com: | Espaçador transparente de 1 pixel 
Células vazias : 


Cor da célula : Usar cor da tela 


Conteúdo : | Imagem do espaçador 


5 No menu pop-up Espaçar com, selecionar Espaçador transparente de 1 pixel. 


A seleção dessa opção faz o Fireworks exportar um arquivo gráfico denominado spacer.gif, que 
é uma imagem transparente de 1 pixel. Os espaçadores são usados pelos designers da Web para 
ajudar no layout da página. Eles mantêm células da tabela HTML abertas. Sem eles, as células 
vazias de uma tabela HTML são recolhidas, alterando assim o layout pretendido para a página. 
Você observará o arquivo spacer.gif mais tarde quando exibir os arquivos exportados. 


Não é necessário entender os espaçadores, mas é bom saber sobre essa opção se desejar utilizá-la 
no futuro. 


6 Clicar na guia Específico do documento. 


Configuração do HTML 


Geral | Tabela, Específico do documento 


Nomes dos arquivos: 
Fatias: 


| doc.name x] + | Sublinhar » + |Fileira/coluna [13 c2,14 c x] sr 


|Nenhum x| ar [Nenhum »| + | Nenhum {v| $ 


Molduras: | Sublinhar v| + [N° da moldura (f2, f3, f4...) ~ | 
Exemplo: Sem título-1_r1_c2_f2.gif 


Descrição de imagem alternativa: 


Definir padrĝı 
[| Múltiplas páginas de barra de nav em HTML 


Exportar múltiplos arquivos HTML para usar em documentos HTML sem molduras. 


[v] Incluir áreas sem fatias C Usar codificação UTF-8 | 
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A guia Específico do documento permite a escolha de uma série de preferências específicas do 
documento, inclusive uma convenção de denominação personalizada para os arquivos 
exportados. Lembrar-se de que as opções definidas aqui somente se aplicam ao documento 
Fireworks atual. 


Dica: Para aplicar as configurações da guia Específico do documento a todos os documentos novos, clicar no 
botão Configurar padrões. 


7 Clicar em OK para aceitar as configurações da guia Específico do documento e fechar a caixa 
de diálogo Configuração do HTML. 
Exportação do documento para o formato HTML 
Agora, seu documento está pronto para ser exportado. 
1 Selecionar Arquivo > Exportar. 


A caixa de diálogo Exportar é aberta. 


Exportar 


Salvar em: | O Export 


Nome do arquivo: [vintage htm 


Arquivos do tipo: [HTML e imagens 


HTML: | Exportar arquivo HTML v 


Fatias: | Exportar fatias v 


C Apenas fatias selecionadas Apenas a moldura atual 
Incluir áreas sem fatias 
Colocar imagens na subpasta 


2 Na caixa de diálogo, navegar até a pasta Tutorial2/Export. 


3 Certificar-se de que HTML e Imagens estão selecionados como tipo de arquivo e digitar 
index.htm como nome do arquivo. A denominação de index.htm como página inicial é uma 
convenção comum usada na Web. Muitos navegadores exibirão automaticamente a página 
index.htm quando um URL listar uma localização, mas não o nome da página. 


Além disso, anteriormente neste tutorial você atribuiu o botão Home a um URL de index.htm. 
No momento, existe apenas uma página no site da Global na Web, então vincular essa página a 
si mesmo não faz muito sentido. Mas, se você criar outras páginas para este site no futuro, será 
possível usar essa barra de navegação em todas as páginas, proporcionando aos usuários um 
método de navegação consistente. 
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4 Certificar-se de que Exportar arquivo HTML esteja selecionado no menu pop-up HT'ML e 
que Exportar fatias esteja selecionado no menu pop-up Fatias. 


5 Selecionar as opções seguir e deixar todas as demais sem seleção: 
e Incluir áreas sem fatias 
e Colocar imagens na subpasta 


Quando você escolher essa opção, o Fireworks permite a seleção de uma pasta em que fiquem 
armazenados os arquivos gráficos exportados. Se a pasta não existir, o Fireworks a criará. Se 
você não escolher uma pasta, por padrão, o Fireworks selecionará uma pasta denominada 
images. Neste tutorial, aceitar a configuração padrão. 


6 Clicar em Salvar. 
Os arquivos são exportados para o local especificado. 


7 Selecionar Arquivo > Salvar para salvar o arquivo PNG. 


Teste do arquivo concluído 


Os arquivos foram exportados, portanto é hora de verificar sua criação. 


Exibição da lista de arquivos exportados 


Primeiro, examinar a lista de arquivos exportada pelo Fireworks. Os novos arquivos criados 
durante o processo de exportação aparecem na pasta Export. 


1 No espaço de trabalho, procurar a pasta Export e abri-la. 


O Fireworks criou um arquivo HTML denominado index.htm. Esta é a página inicial do site 
da Global na Web. O programa também criou um arquivo denominado mm menu.js, que 
contém o código necessário para exibir menus pop-up. 


Exportar 


>» 


>» 
Arquivo a” 


ço B C:\Docments ands Y| EA Ir 


É lindex.htm 
[8] mm, menu, js 


“9 Meu computador 


2 Abrir a subpasta images. 


O Fireworks também exportou arquivos gráficos para todas as artes-finais. Cada fatia do 
Fireworks é exportada como um arquivo gráfico em separado. Existem vários arquivos GIF e 
um arquivo JPEG. JPEG representa a imagem bitmap otimizada anteriormente. O arquivo 
denominado spacer.gif é o resultado da opção de espaçamento selecionada na caixa de diálogo 
Configuração do HT'ML e será usada para ajudar no layout da página. 
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Exibição de arquivo HTML Fireworks em um navegador 
Agora que já verificou os arquivos exportados, é hora de testar a página da Web em um navegador. 
1 Na pasta Export, arrastar o arquivo index.htm para um navegador da Web aberto. 


2 No navegador, clicar nos botões adicionados para testar os links, depois retornar ao arquivo 
index.htm. 


3 Testar os outros recursos adicionados. 


4 A maioria dos navegadores da Web permite a exibição do código de origem com um comando 
como Exibir > Origem. Localizar e executar o comando que permite exibir o código. 


E» index. htm - Bloco de notas DER) 


Arquivo Editar Formatar Exibir Ajuda 

khtml>0<head>o<title>final. gif</title>0<meta http-equiv="Content-Type” a 
content="text/html; ">0<!-- Fireworks MX Dreamweaver MX target. = 
Created Thu Mar 07 15:30:45 GMT-0600 2002-->D<script 
language="Javascript">0<!--nfunction mm findobjén, d) { //v3.00 var 

p, ix; ifC!d) ocument; 

ifCCp=n. indexof("7"3)>08&parent. frames. length) {0 

dzpar ent. frames En EUoSTrAng prL) T document: n=n. substring(o, p); + 

if C! Cx=d[n])&&d.a11) x=d.a1] [n]; for Ci=Q;!x&&i<d. forms. Tength; i++) 

x=d. forms [i] [n];o for(i=0;!x&&d. la ers&&i<d. layers. length; i++) 
x=mMm_findobj Cn, d. la Srs H] dacumened: return x; Ofofunction 

MM swapImage() { //43.00 1, j=0, x, a=MM swapImage.arguments; 
document. MM sr=new array; i i<(a. length-2);1+=3)0 if 

CCx=mm findobj Ca [1]))!=nuli)tdocument.mMusr [j++]=x; ifC!x.osrc) 
x.osrc=x.src; x.src=a[i+2]; jofofunction MM swaptni Restore) { //v3.00 
var i,Xx,a=document.mm_sr; for Ci=0;a&&i<a. Tengthagix=a [1] )&&x. osrc; i++) 


x.src=x.oSrc; 0 Jo0function MM nbGrouplevent, grpName) { //43.00 var 


i, img, nbarr, args=MM nbGroup. arguments;0 if (event == "init" && 

args. length > 2) {0 if CCimg = MM findobj (args [2])) != null && 

!img.mm_ Init) {0 img.mm_init = true; img.mM_up = args[3]; 

img.MM dn = img.src; i if CCnbarr = document [grpNameJ) == null) 

nhárr = document [grpName] = new array;0 nbárr [nbarr. length] = 

img; 0 for (i=4; i < args: Tengeh-i; i+=2) if CCimg = 

mm findobj (args [1])) != nul1) {0 if Climg.MM up) img. mm up = 

img. src; o img.src = img.MM dn = args [i41):0 

nbårr [nbarr. length] = img; 0 } jo } else if (event == "over") To 

document .mm nbover = nharr = new array:0 for (i=l; à < 

args. length-1; i+=3) if CCimg = MM findobjCargs[1])) != null) {0 

if Climg.MM Up) img.MM up = img.src;0 img.src = Cimg.MM dn && 

args [i+2]) ? args[1+2] : args[i+1];0 nharr [nbarr. length] = img;0 
0 } else if Cevent == "out" ) {10 for (i=0; i < 

document.mm_nbover.1Tength; i++) {0 img = document.mm_nbover [i]; 

img.src = Cimg.MM dn) ? img.mm_ dn : img.mm_up; jo }_ else if Çevent == 

“down") To if CCnharr = document [ FpNasElo != nulido for (i=0; 

i < nharr.Tength; i++) { im Sabar [T img.src = img.MM up; img. MM dn 

= 0; JH document [grpnName] = nbarr = new array); for (i=2; i< 

v 


5 Rolar o código de origem. Se conhecer HTML e JavaScript, irá reconhecer o código criado 
pelo Fireworks. Se não conhecer HTML e JavaScript, vai gostar de saber que com o Fireworks 
você não precisa conhecer essas linguagens. 


Seguir as próximas etapas 


Você completou as principais tarefas no fluxo de trabalho de produção para criar uma página da 
Web com o Fireworks. E mais, aprendeu como abrir um documento, importar gráficos dentro 
dele e fatiar o documento. Além disso, criou um rollover de arrastar e soltar, criou botões e um 
menu pop-up. Finalmente, aprendeu a otimizar e exportar o documento concluído. 


Para informações detalhadas sobre qualquer recurso mencionado neste tutorial e informações sobre 
recursos adicionais do Fireworks, consultar o índice de Usando o Fireworks ou pesquisar a Ajuda do 
Fireworks. Para mais tutoriais, visitar http://www.macromedia.com/br/. Certificar-se de visitar o 
premiado Centro de suporte da Macromedia, em http://www.macromedia.com/br/support/. 
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CAPÍTULO 3 
Princípios básicos do Fireworks 


O Macromedia Fireworks MX é um aplicativo para elaborar gráficos para usar na Web. Suas 
soluções inovadoras atacam os principais problemas com que se deparam os projetistas gráficos e 
mestres da Web. Sua ampla variedade de ferramentas permite criar e editar imagens gráficas 
vetoriais e de bitmap em um único aplicativo. 


O advento do Fireworks libertou os criadores da Web das idas e vindas de uma série de aplicativos 
específicos para essa tarefa. Os Efeitos ao vivo não destrutivos eliminaram a frustração de ter que 
recriar gráficos da Web desde o início, depois de qualquer edição simples. O programa gera 
JavaScript, facilitando a criação de rollovers. Recursos de otimização eficientes reduziram o 
tamanho dos arquivos de gráficos da Web sem prejudicar a qualidade. 


Se o usuário for um iniciante no Fireworks, será útil entender os conceitos gerais, como abrir, 
importar e salvar arquivos; familiarizar-se com o ambiente do Fireworks e trabalhar com um arquivo. 
O ambiente de trabalho do Fireworks estará disponível assim que o usuário criar um arquivo ou 
abrir um arquivo existente. O Fireworks MX introduz várias melhorias no espaço de trabalho, 
inclusive o Inspetor de propriedades, um painel Ferramentas segmentado e grupos de painéis. 


Sobre gráficos vetoriais e de bitmap 


Os computadores exibem gráficos em formato vetorial ou de bitmap. Entender a diferença entre 
os dois formatos, o ajuda a entender o Fireworks, que contém ferramentas vetoriais e de bitmap e 
tem capacidade para abrir ou importar ambos os formatos. 


Sobre gráficos vetoriais 


Gráficos vetoriais descrevem imagens utilizando linhas e curvas, denominadas vetores, que também 
incluem informações sobre cor e posição. Por exemplo, a imagem de uma folha pode ser descrita por 
uma série de pontos, cujo resultado represente o contorno da folha. A cor da folha é determinada 
pela cor do contorno, ou traço, e pela cor da área abrangida pelo contorno, ou preenchimento. 


Ao editar um gráfico vetorial, o usuário modifica as propriedades das linhas e curvas que 
descrevem sua forma. Gráficos vetoriais são independentes de resolução, ou seja, é possível mover, 
redimensionar, mudar forma e alterar a cor de um gráfico vetorial, assim como exibi-lo em 
dispositivos de saída de resolução variável, sem alterar a qualidade de sua aparência. 


Sobre gráficos de bitmap 


Gráficos de bitmap consistem em pontos, denominados pixels, organizados em uma grade. A 
própria tela do computador consiste em uma grande grade de pixels. Em uma versão bitmap, a 
imagem de uma folha seria determinada pelo local e valor de cor de cada pixel na grade. A cada 
ponto é atribuída uma cor. Quando visualizados na resolução correta, os pontos são encaixados 
como pastilhas em um mosaico para formar uma imagem. 
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Ao editar um gráfico de bitmap, o usuário modifica pixels, em vez de linhas e curvas. Esses 
gráficos de bitmap são dependentes de resolução, significando que os dados que descrevem a 
imagem são fixos a uma grade de um determinado tamanho. O aumento do gráfico de bitmap 
pode fazer com que as bordas da imagem fiquem dentadas, pois os pixels são redistribuídos dentro 
da grade. A exibição de um gráfico de bitmap em um dispositivo de saída com uma resolução 
mais baixa do que a própria imagem, também degrada a qualidade da imagem. 


Sobre o trabalho no Fireworks 


O Fireworks é uma aplicativo versátil para criar, editar e otimizar gráficos da Web. Você pode criar 
e editar imagens vetoriais e de bitmap, projetar efeitos na Web como rollovers e menus pop-up, 
cortar e otimizar gráficos para reduzir o tamanho do arquivo e economizar tempo, automatizando 
tarefas repetitivas. Quando o documento estiver concluído, poderá exportá-lo como um arquivo 
JPEG, GIF ou de outro formato — junto com arquivos HTML que contenham tabelas HTML e 
código JavaScript — para utilizá-lo na Web. Também será possivel exportar um tipo de arquivo 
específico para outro aplicativo como Photoshop ou Macromedia Flash, se quiser continuar a 
trabalhar no outro aplicativo. 


Objetos vetoriais e de bitmap 


No painel Ferramentas do Fireworks, o usuário encontrará seções diferentes que contêm 
ferramentas de desenho e edição vetorial e de bitmap. No Fireworks MX, a ferramenta escolhida 
determina se o objeto criado é um objeto vetorial ou bitmap. Por exemplo, ao escolher a 
ferramenta Caneta na seção Vetorial do painel Ferramentas, é possível começar a desenhar 
traçados vetoriais desenhando pontos. Escolher a ferramenta Pincel, e será possível arrastar para 
pintar um objeto bitmap. Escolher a ferramenta Texto, e será possível começar a digitar. 


Após desenhar objetos vetoriais, objetos bitmap ou texto, será possível usar uma ampla gama de 
ferramentas, efeitos, comandos e técnicas para aprimorar e completar seus gráficos. Além disso, 
poderá usar as ferramentas do Fireworks no Editor de botão para criar botões de navegação 
interativos. 


Também é possível usar as ferramentas do Fireworks para editar gráficos importados, nos formatos 
JPEG, GIF, PNG, PSD e vários outros formatos. Depois que tiver importado uma imagem 
gráfica, o usuário poderá ajustar sua cor e tom, assim como cortá-la, retocá-la e mascará-la. 


Gráficos interativos 


As fatias e os pontos ativos são objetos da Web, que especificam áreas interativas em um gráfico da 
Web. As fatias recortam uma imagem em diferentes seções, e possibilitam a aplicação de 
comportamentos de rollover, animação e vínculos URL (Uniform Resource Locator) com partes 
da imagem total. Além disso, as fatias permitem exportar as seções usando diferentes 
configurações. Em uma página da Web, cada fatia aparece em uma célula da tabela. Os pontos 
ativos permitem atribuir vínculos URL e comportamentos a todo o gráfico ou a uma parte dele. 
Para mais informações, consultar Capítulo 12, “Fatias, rollovers e pontos ativos”, na página 261. 


As fatias e pontos ativos possuem alças de rollover de arrastar-e-soltar, que permitem atribuir, de 
forma rápida, comportamentos de troca de imagem e reollover a gráficos diretamente no espaço 
de trabalho. O Editor de botão e o Editor de menu pop-up são recursos convenientes do 
Fireworks que ajudam a criar gráficos interativos especiais para navegar em sites da Web. 
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Sobre otimização e exportação de gráficos 


O Fireworks tem recursos poderosos de otimização para ajudá-lo a encontrar o equilíbrio entre 
tamanho do arquivo e qualidade aceitável, durante a preparação para exportar gráficos. É possível 
otimizar gráficos da Web no Fireworks para reduzir o tamanho do arquivo e tornar mais rápido o 
carregamento ao exibir sites da Web, enquanto compara a qualidade dos gráficos nos modos 
Visualizar, 2 para cima, 4 para cima, no espaço de trabalho. 


Pode-se fatiar uma imagem em partes menores e otimizar cada parte no formato que melhor se 
adaptar ao conteúdo. Para melhorar a flexibilidade da otimização, é possível utilizar a compressão 
seletiva de JPEG para focalizar a parte mais importante de um JPEG, enquanto se reduz a 


qualidade do fundo. 


Depois de otimizar os gráficos, a próxima etapa será exportá-los para utilização na Web. A partir 
do documento PNG de origem no Fireworks, é possível exportar vários tipos de arquivo, inclusive 
JPEG, GIF, GIF animado e tabelas HTML contendo imagens fatiadas em vários tipos de 
arquivos. Para mais informações, consultar Capítulo 15, “Otimização e exportação”, na 

página 325. 


Criação de um novo documento 


Quando escolher Arquivo > Novo para criar um novo documento no Fireworks, será criado um 
documento Portable Network Graphic ou PNG. PNG é o formato de arquivo nativo do 
Fireworks. Depois de criar gráficos no Fireworks, é possível exportá-los como outros formatos de 
gráfico da Web, como JPEG, GIF e GIF animado. Pode-se também exportá-los para diversos 
formatos populares usados fora da Web, tais como TIFF e BMP. Seja qual for a configuração de 
otimização e exportação escolhida, o arquivo PNG original do Fireworks será preservado para 
permitir rápida edição posterior. 

Para criar um gráfico da Web no Fireworks, é necessário primeiro configurar um novo documento 
ou abrir um já existente. É possível ajustar as opções de configuração mais tarde no Inspetor de 


propriedades. 
Para criar um novo documento: 


1 Escolher Arquivo > Novo. 


A caixa de diálogo Novo Documento abre. 


Novo documento 


Tamanho da tela: 976.6K 
Largura: [500 7 Pixels 


Altura: [500 Pixels 


Resolução: Es [ Pixels/Polegadas 


Cor da tela: 

®© Branco 

(O Transparente 

O Personalizar EM 


Cancelar 
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2 Digitar a largura e altura da tela em pixels, polegadas ou centímetros. 
3 Digitar uma resolução em pixels por polegada ou centímetros. 
4 Selecionar uma cor branca, transparente ou personalizada para a tela. 
Nota: Usar a janela pop-up da caixa Cor personalizada para escolher uma cor de tela personalizada. 


5 Clicar em OK para criar o novo documento. 


Para criar um novo documento com o mesmo tamanho de um objeto na Área de transferência: 
1 Copiar o objeto para a Área de Transferência a partir de um dos seguintes: 

e Outro documento do Fireworks 

e Navegador da Web 

* Qualquer dos aplicativos listados em “Como colar no Fireworks” na página 79 

2 Escolher Arquivo > Novo. 


A caixa de diálogo Novo Documento abre com as dimensões de largura e altura do objeto na 
Área de transferência. 


3 Definir a resolução e cor da tela e clicar em OK. 


4 Escolher Editar > Colar para colar o objeto da Área de transferência no novo documento. 


Abertura e importação de um arquivo 


No Fireworks, é possível abrir, importar e editar imagens vetoriais e bitmap criadas em outros 
programas gráficos, facilmente. Além disto, o usuário pode importar imagens a partir de uma 
câmara digital ou digitalizador. 


Para mais informações sobre como importar gráficos do Photoshop, Macromedia FreeHand, 
CorelDraw ou Illustrator, consultar “Uso do Fireworks com outros aplicativos” na página 363. 


Para abrir um documento do Fireworks: 
1 Escolher Arquivo > Abrir. 

A caixa de diálogo Abrir é exibida. 
2 Selecionar o arquivo e clicar em Abrir. 


Dica: Para abrir um arquivo sem substituir a versão anterior, escolher Abrir como sem título e salvar usando um 
nome diferente. 


Abertura de um documento fechado recentemente 


O menu Arquivo relaciona até 10 documentos fechados recentemente no submenu Abrir recente. 


Para abrir um documento fechado recentemente: 
1 Escolher Arquivo > Abrir recente. 


2 Escolher um arquivo do submenu. 
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Abertura de um gráfico criado em outros aplicativos 


Com o Fireworks, é possível abrir arquivos de outros aplicativos ou formatos de arquivo, inclusive 
arquivos do Photoshop, Macromedia FreeHand, Illustrator, descompactado do CorelDRAW, 
WBMP EPS, JPEG, GIF e GIF animado. 


Quando abrir um formato de arquivo diferente do PNG usando Arquivo > Abrir, será criado um 
novo documento PNG do Fireworks baseado no arquivo aberto. Embora esse novo documento 
seja um arquivo PNG, o arquivo original permanecerá inalterado. 


Para mais informações sobre como trabalhar com Freehand, Photoshop, Illustrator e CorelDraw, 
consultar “Uso do Fireworks com outros aplicativos” na página 363. 


GIFs animados 
É possível trazer arquivos GIF animados para o Fireworks de duas maneiras: 


e Importar um GIF animado como um símbolo de animação, que permite editar e mover todos 
os elementos da animação como uma única unidade e usar o painel Biblioteca para criar novas 
ocorrências do símbolo. 


Nota: Quando importar um GIF animado, a configuração de retardo de moldura é padronizada para 0,07 
segundos. Se necessário, usar o painel Molduras para restaurar o tempo original. 


e Abrir um GIF animado da mesma forma que um arquivo GIF normal. Cada elemento do GIF 
é colocado como uma imagem separada em sua própria moldura do Fireworks. É possível 
converter o gráfico em um símbolo de animação no Fireworks. 


Arquivos EPS 


O Fireworks abre a maioria dos arquivos EPS, tais como arquivos EPS do PhotoShop, como 
imagens bitmap planas, nas quais todos os objetos são combinados em uma única camada. No 
entanto, alguns arquivos EPS exportados do Illustrator, retêm suas informações vetoriais. 


Quando abrir ou importar a maioria dos arquivos EPS, a caixa de diálogo Opção de arquivos EPS 
abrirá. 
Opções de arquivo EPS 


Tamanho da imagem:13.1K 


º 56 | | Pixels 


t [s0 | [Pies 


Resolução: 72 | | Pizels/Polega v 


Limitar proporções 
Sem serrilhado 


Tamanho da imagem determina as dimensões da imagem e as unidades em que são exibidas suas 
proporções. Pode-se escolher entre pixels, porcentagem, polegadas e centímetros. 


Resolução indica a resolução, em pixels por unidade. 


Limitar proporções abre o arquivo na mesma proporção de tamanho que o original. 
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Sem serrilhado suaviza as bordas serrilhadas do arquivo EPS aberto. 


Quando abrir ou importar arquivos EPS do Illustrator que contiverem informações vetoriais, a 
caixa de diálogo Opções de arquivo vetorial abrirá. Esta é a mesma caixa de diálogo que aparece ao 
abrir ou importar arquivos do FreeHand. Para mais informações sobre as opções nesta caixa de 
diálogo, consultar “Importação de um gráfico do FreeHand para o Fireworks” na página 382. 


Arquivos WBMP 


O Fireworks pode abrir arquivos WBMP, arquivos de 1 bit (monocromo) otimizados para 
dispositivos de computação móvel. Esse formato é para ser usado nas páginas Protocolo de 
aplicativo sem fio (WAP). É possível abrir um arquivo WBMP diretamente utilizando Arquivo > 
Abrir ou importar um arquivo WBMP utilizando Arquivo > Importar. 


Criação de arquivo PNG do Fireworks a partir de arquivos HTML 


O Fireworks pode abrir e importar conteúdo HTML criado em outros aplicativos. Quando abrir 
ou importar um arquivo HT'ML, o Fireworks reconstruirá o layout e os comportamentos 
definidos pelo código HTML, permitindo recriar páginas da Web que contenham gráficos 
fatiados, botões JavaScript e outros tipos de interatividade. Isso permite salvar sites da Web 
herdados mesmo que o usuário não tenha os arquivos PNG originais. Com este recurso, é possível 
abrir ou importar com rapidez uma página da Web para atualizar gráficos, alterar layout de 
documentos ou alterar vínculos de navegação, botões e outros elementos interativos, tudo sem ter 
que reconstruir a página do zero ou modificar seu script. 


Como o Fireworks exporta o conteúdo HT'ML na forma de uma tabela HT'ML, ele também 
determina o layout do documento para HTML importado com base em tabelas HTML. Um 
arquivo HTML deve conter pelo menos uma tabela para que o Fireworks possa reconstruí-lo. Para 
mais informações sobre HTML, consultar “Exportação de HTML” na página 352. 


É possível trazer conteúdo HTML para o Fireworks de várias maneiras: 
* Abrir todas as tabelas HTML dentro de um arquivo HTML. 
e Abrir a primeira tabela HTML que o Fireworks encontrar em um arquivo HTML. 


* Importar a primeira tabela HT'ML que o Fireworks encontar em um documento do Fireworks 
existente. 

Nota: O Fireworks também pode importar documentos que utilizem codificação UTF-8 e aqueles escritos em 

XHTML. Arquivos XHTML normalmente têm a extensão .xhtm ou .xhtml. Para mais informações sobre esses tipos 


de arquivo, “Exportação de um arquivo com codificação UTF-8” na página 359 e “Exportação de XHTML” na 
página 358. 


Para abrir todas as tabelas de um arquivo HTML: 
1 Escolher Arquivo > Reconstituir tabela. 
2 Selecionar o arquivo HTML que contém as tabelas que deseja abrir e clicar em Abrir. 


Cada uma das tabelas se abre na sua própria janela de documento. 


Para abrir apenas a primeira tabela de um arquivo HTML: 
1 Escolher Arquivo > Abrir. 
2 Selecionar o arquivo HTML que contém a tabela que deseja abrir e clicar em Abrir. 


A primeira tabela no arquivo HTML abrirá em uma nova janela de documento. 
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Para importar a primeira tabela de um arquivo HTML para um documento do Fireworks aberto: 
1 Escolher Arquivo > Importar. 
2 Selecionar o arquivo HTML do qual deseja importar e clicar em Abrir. 


3 Clicar no ponteiro de inserção onde deseja que a tabela importada apareça. 


Inserção de um objeto em um documento do Fireworks 


É possível importar, arrastar-e-soltar ou copiar e colar objetos vetoriais, imagens bitmap ou texto 
criado em outros aplicativos para um documento do Fireworks. Além disto, o usuário pode 
importar imagens a partir de uma câmara digital ou digitalizador. 


Como arrastar-e-soltar 


Você pode arrastar objetos vetoriais, imagens bitmap ou texto para o Fireworks a partir de 
qualquer aplicativo que suporte o recurso arrastar-e-soltar: 


e FreeHand 7 ou posterior 

e Flash 3 ou posterior 

e Photoshop 4 ou posterior 

* Illustrator 7 ou posterior 

e Microsoft Office 97 ou posterior 

e Microsoft Internet Explorer 3 ou posterior 
* Netscape Navigator 3 ou posterior 


* CorelDRAW 7 ou posterior 


Para arrastar-e-soltar no Fireworks: 


Do outro aplicativo, arrastar o objeto ou texto para o Fireworks. 


Como colar no Fireworks 


Colar um objeto copiado de outro aplicativo para o Fireworks posiciona o objeto no centro 
do documento ativo. É possível copiar e colar um objeto ou texto em qualquer um destes 
formatos da Área de transferência: 


e FreeHand 7 ou posterior 
e Illustrator 

e PNG 

e PICT (Macintosh) 
e DIB (Windows) 

e BMP (Windows) 
e “Texto ASCII 

e EPS 

e WBMP 

e TXT 

e RTF 
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Para colar no Fireworks: 
1 No outro aplicativo, copiar o objeto ou texto que deseja colar. 


2 No Fireworks, colar o objeto ou texto no seu documento. 


Localização de um objeto colado 


Quando colar um objeto no Fireworks, a localização do objeto colado dependerá do que 
for selecionado: 


* Se pelo menos um objeto em uma única camada for selecionado, o objeto colado será colocado 
na frente do — ou empilhado sobre — objeto selecionado na mesma camada. 


e Sea própria camada for selecionada e nenhum objeto ou todos os objetos forem selecionados, o 
objeto colado será colocado na frente do — ou empilhado sobre — primeiro objeto da mesma 
camada. 


* Se dois ou mais objetos em mais de uma camada forem selecionados, o objeto colado será 
colocado na frente do — ou empilhado sobre — primeiro objeto na primeira camada. 


* Sea Camada da Web ou um objeto na Camada da Web for selecionado, o objeto colado será 
colocado na frente de — ou empilhado sobre — todos os outros objetos na camada mais baixa. 


Nota: A Camada da Web é uma camada especial que contém todos os objetos da Web e sempre permanece no 
topo do painel Camadas. Para mais informações sobre camadas, consultar “Camada, mascaramento e mistura” na 
página 221. 


Como fazer nova amostragem de um objeto colado 


Quando colar um bitmap com uma resolução diferente daquela do documento do Fireworks de 
destino, o Fireworks pergunta se deseja fazer uma nova amostragem do bitmap. 


Fazer nova amostragem adiciona pixels a ou subtrai pixels de um bitmap redimensionado para 
corresponder à aparência do bitmap original, da forma mais acurada possível. Fazer nova 
amostragem de um bitmap com uma resolução mais alta, normalmente provoca pouca perda de 
qualidade. Fazer nova amostragem com uma resolução menor, entretanto, sempre provoca perda 
de dados e, em geral, reduz a qualidade. 


Para fazer nova amostragem de um objeto bitmap por meio de colagem: 
1 Copiar um bitmap para a área de transferência no Fireworks ou em outro programa. 
2 Escolher Editar > Colar no Fireworks. 


Se a imagem bitmap na área de transferência tiver uma resolução diferente do documento 
atual, uma caixa de diálogo aparecerá, solicitando a escolha entre fazer ou não uma nova 
amostragem. 


3 Escolher um dos seguintes procedimentos: 


e Nova amostragem mantém a largura e altura originais do bitmap colado, adicionando ou 
subtraindo pixels conforme necessário. 


e Não efetuar nova amostragem mantém todos os pixels originais, o que poderá tornar o 
tamanho relativo da imagem maior ou menor do que o esperado. 
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Importação de arquivo PNG 


É possível importar arquivos PNG do Fireworks para a camada atual do documento ativo do 
Fireworks. Todos os objetos de ponto ativo e de fatia são colocados na Camada da Web do 
documento. Para mais informações sobre fatias e objetos da Web, consultar “Visualização e 
exibição de fatias e guias de fatia” na página 264. Para mais informações sobre fatias, consultar 
“Como trabalhar com uma camada” na página 221. 

Para importar um arquivo PNG para uma camada do documento do Fireworks: 

1 No painel Camadas, selecionar a camada para a qual deseja importar o arquivo. 

2 Escolher Arquivo > Importar para abrir a caixa de diálogo Importar. 


3 Navegar até o arquivo a ser importado e clicar em Abrir. 


4 Na tela, posicionar o ponteiro de importação no local em que o canto superior esquerdo da 
imagem deverá aparecer. 


5 Importar o arquivo: 
e Clicar para importar a imagem inteira. 
e Arrastar o ponteiro de importação para redimensionar a imagem durante a importação. 


O Fireworks mantém as proporções da imagem. 


Importação de um digitalizador ou de uma câmera digital 


O scanner ou a câmera digital deve ser compatível com TWAIN (Windows) ou oferecer suporte 
aos plug-ins do Photoshop Acquire (Macintosh) para poder importar imagens. As imagens 
importadas para o Fireworks de um digitalizador ou câmera digital abrem como novos 
documentos. 

Nota: O Fireworks não pode importar imagens de digitalizadores ou câmeras digitais a menos que os drivers de 
software, módulos e plug-ins apropriados tenham sido instalados. Para mais instruções específicas sobre 
instalação, configurações e opções, consultar a documentação do módulo TWAIN ou o plug-in do Photoshop 
Acquire. 


No Macintosh, o Fireworks procura automaticamente plug-ins do Photoshop na pasta Plug-ins da 
pasta de aplicativo do Fireworks. Caso não queira colocar os plug-ins aqui, indicar um local 
alternativo para o Fireworks. 


Nota: A localização exata da pasta Plug-ins varia, dependendo do sistema operacional. Para mais informações, 
consultar “Como trabalhar com arquivos de configuração” na página 427. 


Para direcionar o Fireworks para os plug-ins do Photoshop Acquire: 
1 No Fireworks, escolher Editar > Preferências. 
Nota: No Mac OS X, escolher Fireworks > Preferências. 
2 Clicar na guia Pastas. 
3 Selecionar Plug-ins do Photoshop. 


4 Sea caixa de diálogo Selecionar a pasta de plug-ins do Photoshop (Windows) ou Escolher uma 
pasta (Macintosh) não abrir automaticamente, clicar em Procurar. 


5 Navegar até a pasta que contém os plug-ins do Photoshop. 
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Para importar uma imagem a partir de um digitalizador ou câmera digital: 
1 Conectar o scanner ou câmera ao computador. 
2 Instalar o software fornecido com o digitalizador ou camera se ainda não o tiver instalado. 


3 No Fireworks, escolher Arquivo > Digitalizar e, em seguida, escolher um módulo TWAIN ou 
plug-in de aquisição do Photoshop que corresponda ao dispositivo a partir do qual a imagem 
será importada. 


Nota: Para a maioria de módulos TWAIN ou plug-ins de aquisição do Photoshop, caixas de diálogo adicionais 
solicitarão que o usuário defina outras opções. 


4 Seguir as instruções para aplicar as configurações desejadas. 


A imagem importada é aberta como um novo documento do Fireworks. 


Salva de um arquivo do Fireworks 


Quando criar ou abrir um documento no Fireworks, o nome do documento terá a extensão .png. 
Isso ocorrerá mesmo se abrir um arquivo com uma extensão diferente como jpg, -gif ou .psd. O 
arquivo exibido na janela do documento do Fireworks passará a ser o arquivo de origem ou de 
trabalho. Todas as edições efetuadas serão aplicadas ao arquivo PNG. 


Utilizar um PNG do Fireworks como arquivo de origem, tem as seguintes vantagens: 


e O arquivo PNG de origem sempre pode ser editado. É possível voltar e fazer alterações 
adicionais mesmo depois que tiver exportado arquivos para utilizar na Web. 


e Se abrir um arquivo existente de um formato diferente, como JPEG, e fizer alterações nele, o 
arquivo original estará protegido. As alterações, na verdade, são feitas em um arquivo PNG do 
Fireworks, mantendo inalterado o arquivo original. 


* Gráficos complexos podem ser fatiados em partes no arquivo PNG e, em seguida, exportados 
como vários arquivos com formatos de arquivo diferentes e várias configurações de otimização. 


Documentos do Fireworks são sempre salvos no formato PNG. Para salvar as alterações feitas em 
JPEG, GIF ou outro arquivo gráfico nos respectivos formatos originais, é necessário exportar o 
arquivo. 

Nota: No Windows, quando abrir um arquivo não PNG no Fireworks, esse arquivo ainda será identificado usando 


sua extensão original na janela do documento do Fireworks. Contudo, todas as edições feitas serão, na verdade, 
feitas no arquivo PNG do Fireworks. 


Para salvar um novo documento do Fireworks: 

1 Escolher Arquivo > Salvar como. 
A caixa de diálogo Salvar como abre. 

2 Navegar até o local desejado e digitar o nome do arquivo. 
Não é necessário digitar a extensão, o Fireworks fará isso. 


3 Clicar em Salvar. 


Para salvar um documento existente do Fireworks: 


Escolher Arquivo > Salvar. 
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Para salvar (exportar) um documento em outro formato: 
1 Escolher um formato de arquivo no painel Otimizar. 
2 Escolher Arquivo > Exportar para exportar o documento. 


Para mais informações, consultar “Otimização e exportação” na página 325. 


Ambiente de trabalho do Fireworks 


Quando abrir um documento no Fireworks MX pela primeira vez, o ambiente de trabalho será 
ativado, inclusive o painel Ferramentas, Inspetor de propriedades, menus e outros painéis. O painel 
Ferramentas, do lado esquerdo da tela, contém categorias rotuladas, inclusive bitmap, vetorial e 
grupos de ferramentas da Web. O Inspetor de propriedades aparece, por padrão, ao longo da parte 
inferior do documento e exibe, inicialmente, as propriedades do documento. À medida que 
trabalhar no documento, ele muda para exibir as propriedades de uma ferramenta recém 
selecionada ou de um objeto selecionado no momento. À princípio, os painéis são encaixados em 
grupos do lado direito da tela. A janela do documento aparece no centro do aplicativo. 
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Utilização do painel Ferramentas 


O painel Ferramentas é organizado em seis categorias: Selecionar, Bitmap, Vetorial, Web, Cores e 
Exibir. Nas versões anteriores do Fireworks, era necessário alterar entre os modos bitmap e 
vetorial. Agora, basta escolher uma ferramenta e começar a utilizá-la. O aplicativo aplicará a 
ferramenta de maneira apropriada. 
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Alteração de uma opção de ferramenta 


Quando escolher uma ferramenta, o Inspetor de propriedades exibirá suas opções. Algumas 
opções de ferramenta continuam a ser exibidas à medida o usuário trabalha com a ferramenta. 
Para outras ferramentas como forma básica, Caneta e Linha, o Inspetor de propriedades exibe as 
propriedades dos objetos selecionados. Para mais informações sobre o Inspetor de propriedades, 
consultar “Utilização do Inspetor de propriedades” na página 85. 


Para exibir as opções da ferramenta usada no momento no Inspetor de propriedades: 


Escolher Selecionar > Cancelar seleção para desmarcar todos os objetos. 
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Para mais informações sobre opções específicas da ferramenta, consultar as seções que introduzem 
as várias ferramentas em Usando o Fireworks ou a Ajuda do Fireworks. 
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Seleção de uma ferramenta em um grupo de ferramentas 


Um pequeno triângulo no canto inferior direito de uma ferramenta no painel Ferramentas indica 
que essa faz parte de um grupo de ferramentas. Por exemplo, a ferramenta Retângulo faz parte do 
grupo básico de ferramentas de forma, que também inclui as ferramentas Retângulo arredondado, 
Elipse e Polígono. 


Vetor — 
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A v E Ferramenta Retângulo (U) 
+ O) Ferramenta Retângulo Arredondado (U) 
| {t O Ferramenta Elipse (U) 
m (O Ferramenta Polígono (U) 


Para escolher uma ferramenta alternativa em um grupo de ferramentas: 
1 Clicar no ícone da ferramenta e manter pressionado o botão do mouse. 


Um menu pop-up aparece com ícones de ferramentas, nomes de ferramentas e teclas de atalho. 
A ferramenta selecionada no momento tem uma marca de seleção à esquerda do nome da 
ferramenta. 


2 Arrastar o ponteiro para realçar a ferramenta desejada e soltar o botão do mouse. 


A ferramenta aparece no painel Ferramentas e as opções da ferramenta aparecem no Inspetor de 


propriedades. 


Utilização do Inspetor de propriedades 


O Inspetor de propriedades é um painel sensível ao contexto que exibe as propriedades da seleção 
atual, opções da ferramenta atual ou propriedades do documento. Por padrão, o Inspetor de 
propriedades é encaixado na parte inferior do espaço de trabalho. 


O Inspetor de propriedades pode ser aberto com metade da altura, exibindo duas fileiras de 
propriedades, ou com toda a altura, exibindo quatro fileiras. Também é possível recolher 
totalmente o Inspetor de propriedades, enquanto esse permanece no espaço de trabalho. 


Nota: A maioria dos procedimentos descritos em Usando o Fireworks pressupõem que o Inspetor de propriedades 
seja exibido com toda a altura. 


Para desencaixar o Inspetor de propriedades: 


Arrastar o prendedor no canto superior esquerdo para outro local do espaço de trabalho. 
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Para encaixar o Inspetor de propriedades na parte inferior do espaço de trabalho (somente Windows): 
Arrastar a barra lateral no Inspetor de propriedades para a parte inferior da tela. 

Para expandir um Inspetor de propriedades com metade da altura para toda a altura, exibindo 
opções adicionais: 

e Clicar na seta de expansão no canto inferior direito do Inspetor de propriedades. 


e Clicar no ícone na parte direita superior do Inspetor de propriedades e escolher Toda a altura 
no menu Opções do Inspetor de propriedades. 


Nota: No Windows, o menu Opções só estará disponível quando o Inspetor de propriedades estiver encaixado. 


Para reduzir o Inspetor de propriedades a metade da altura: 
e Clicar na seta de expansão no canto inferior direito do Inspetor de propriedades. 
* Escolher Meia altura no menu Opções do Inspetor de propriedades. 


Nota: No Windows, o menu Opções só estará disponível quando o Inspetor de propriedades estiver encaixado. 


Para recolher o Inspetor de propriedades quando esse estiver encaixado: 
e Clicar na sera de expansão ou no título do Inspetor de propriedades. 
* Escolher Recolher grupo de painéis no menu Opções do Inspetor de propriedades encaixado. 


Para mais informações sobre opções específicas do Inspetor de propriedades, consultar as seções 
apropriadas em Usando o Fireworks ou a Ajuda do Fireworks. 
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Utilização de um painel 


Painéis são controles flutuantes que o ajudam a editar diferentes aspectos de objetos ou elementos 
selecionados no documento. Os painéis permitem trabalhar em molduras, camadas, símbolos, 
amostras de cor, e muito mais. Cada painel pode ser arrastado, portanto pode-se agrupar painéis 
em arranjos personalizados. 


Os painéis Misturador e Exemplos de cores gerenciam a paleta de cores do documento atual. 


Os painéis Camadas e Molduras organizam a estrutura de um documento e possuem opções para criar, 
excluir e manipular camadas e molduras. O painel Molduras inclui opções para criar animações. 


O painel Informações fornece informações sobre as dimensões de objetos selecionados e as 
coordenadas exatas do ponteiro à medida que é movido na tela. 


O painel Comportamentos gerencia comportamentos, determinando o que os pontos ativos e 
fatias devem fazer em resposta ao movimento do mouse. 


O painel Histórico lista os comandos recentes usados, que podem ser rapidamente desfeitos ou 
refeitos. Além disso, é possível selecionar várias ações e, em seguida, salvá-las e reutilizá-las como 
comandos. Para mais informações, consultar “Utilizar o painel Histórico para desfazer e repetir 
várias ações” na página 101. 


86 Capítulo 3 


O painel Biblioteca contém símbolos gráficos, símbolos de botão e símbolos de animação. É 
possível arrastar, com facilidade, as ocorrências desses símbolos do painel Biblioteca para o seu 
documento. Além disso, pode-se fazer alterações globais em todas as ocorrências modificando 
apenas o símbolo. Para mais informações, consultar “Uso de estilo, símbolo e URL” na 
página 249. 


O painel Otimizar permite gerenciar as configurações que controlam o tamanho de um objeto e o 
tipo de arquivo e trabalhar com a paleta de cores do arquivo ou fatia a ser exportado. 


O painel Estilos permite armazenar e reutilizar combinações de características de objeto ou escolher 
um estilo de estoque. 


O painel URL permite criar bibliotecas que contêm os URLS usados com mais frequência. 


O painel Localizar e substituir permite pesquisar e substituir elementos em um documento ou 
vários documentos, tais como texto, URLs, fontes e cores. 


O Registro de projeto ajuda a rastrear e controlar as alterações feitas em múltiplos arquivos 
quando for usado Localizar e substituir, ou no processo em lote. 


O painel de Respostas é um novo recurso capaz de fazer download dinâmico de uma ampla gama 
de informações úteis a partir do site da Macromedia na Web. O painel tem funções de pesquisa de 
palavra chave para localizar informações na Internet a partir de várias origens. 


Organização de grupos de painéis e painéis 

Por padrão, os painéis do Fireworks MX são encaixados em grupos na área de encaixe do lado 
direito do espaço de trabalho. É possível desencaixar grupos de painéis, adicionar painéis a um 
grupo, desencaixar painéis individuais, reorganizar a ordem dos grupos de painéis encaixados, e 
recolher e fechar grupos de painéis. Também é possível abrir e fechar painéis individuais. 

Para desencaixar ou mover um painel ou grupo de painéis: 

Arrastar o prendedor do painel no canto superior esquerdo para fora da área de encaixe de painel 
do lado direito da tela. 

Para encaixar um painel ou grupo de painéis: 

Arrastar o prendedor do painel para a área de encaixe de painel. 

Conforme arrastar um painel ou grupo de painéis sobre a área de encaixe, uma linha ou retângulo 
de visualização de posição mostra onde ele será posicionado entre os grupos. 

Para recolher ou expandir um painel ou grupo de painéis, seguir um destes procedimentos: 

e Clicar no título do painel ou grupo de painéis. 


Nota: A barra de título ainda será visíviel quando o painel ou grupo de painéis for recolhido. 


e Clicar na seta de expansão no canto superior esquerdo do painel ou grupo de painéis. 


Para separar um painel de um grupo de painéis: 


Arrastar o painel para fora do grupo de painéis. 


Para adicionar um painel a um grupo de painéis aberto: 


Arrastar o prendedor do painel até a área abaixo do nome do grupo de painéis. 
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Para renomear um grupo de painéis: 


1 Clicar no ícone na parte superior direita do grupo de painéis e escolher Renomear grupo de 
painéis no menu Opções. 


2 Digitar o novo nome. 

Para retornar os painéis às posições padrão para a resolução da sua tela, seguir um destes 
procedimentos: 

* Escolher Comandos > Definições de layout de painel > 800 x 600. 

è Escolher Comandos > Definições de layout de painel > 1024 x 768. 

* Escolher Comandos > Definições de layout de painel > 1280 x 1024. 


Para abrir um painel: 
Escolher o nome do painel no menu Janela. 


Dica: Uma marca de seleção ao lado do nome de um painel no menu Janela indica que o painel está aberto. 


Para fechar um painel, seguir um destes procedimentos: 
* Escolher o nome do painel no menu Janela. 


e Clicar no botão Fechar na barra de título do painel quando o painel estiver desencaixado. 


Para ocultar todos os painéis e o Inspetor de propriedades: 


Escolher Exibir > Ocultar painéis. Para exibir os painéis ocultos, escolher Exibir > Ocultar painéis 
novamente. 


Nota: Painéis que estiverem ocultos ao escolher Ocultar painéis permanecerão ocultos quando o usuário 
desmarcar esse comando. 


Configuração de uma opção de painel 

Em geral, é possível definir as opções em um painel usando menus pop-up, paletas de cores, 

controles deslizantes ou discos. Algumas opções apresentam caixas de texto nas quais é possível 

digitar texto ou valores. 

Para alterar uma opção com um menu pop-up: 

1 Clicar na opção. 

2 Alterar o valor: 

* Selecionar uma opção ou amostra de cor. 

e Arrastar o controle deslizante ou disco. 

e Digitar a primeira letra da opção que deseja escolher e pressionar a letra repetidamente para 
percorrer todas as opções que começarem com aquela letra (somente Windows). 

Para inserir informações em uma caixa de texto de painel: 

1 Clicar dentro da caixa de texto. 

2 Digitar um valor. 


3 Pressionar Enter. 
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Utilização do menu Opções do painel ou grupo de painéis 


Cada painel ou grupo de painéis tem um menu Opções que relaciona uma gama de opções 
específicas ao painel ou grupo de painéis ativo. O Inspetor de propriedades também apresenta um 
menu Opções (exceto no Windows quando o Inspetor de propriedades estiver desencaixado). 


Adicionar molduras... 
Duplicar moldura... 
Excluir Quadro 


Distribuir para molduras 


v Cortar automático 
v Diferenciar automático 


Propriedades 


Ajuda 


Renomear grupo de painel... 


Fechar grupo de painéis 


F, 94 Para sempre +H 


Para escolher uma opção no menu Opções de um painel ou grupo de painéis 


1 Clicar no ícone do menu Opções no canto superior direito do painel ou grupo de painéis para 


abrir o menu. 


2 Clicar para escolher um item de menu. 


Salva de um layout de painel 


É possível salvar o layout de painéis usando o menu Comandos. Desta maneira, da próxima vez 
que abrir o Fireworks, os painéis estarão organizados na mesma posição. 


Para salvar o layout de um painel: 


1 Escolher Comandos > Salvar layout de painel. 


2 Nomear o layout de painel e clicar em OK, 


Para abrir um layout de painel salvo: 


Escolher Comandos > Definições de layout de painel e, em seguida, escolher um layout de painel 


no submenu. 
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Sobre o botão Exportação rápida 


O botão Exportação rápida permite exportar os arquivos do Fireworks para vários aplicativos da 
Macromedia, que incluem Dreamweaver, Flash, Director e FreeHand. Além disso, é possível 
exportar os arquivos para Photoshop, FrontPage, Adobe® GoLiveº e Illustrator, ou visualizá-los 
no navegador de sua preferência. Para mais informações, consultar “Como usar o botão 
Exportação rápida” na página 361. 


[24] 


@ Dreamweaver » 
[75] Macromedia Flash > 
7 FreeHand » 
O Director » 
@ Visualizar no navegador > 

Outro > 


Copiar código HTML... 
Atualizar HTML... 


Abertura e movimentação de uma barra de ferramentas (somente no Windows) 
O Fireworks MX para Windows inclui duas barras de ferramentas que contêm comandos comuns 
do Fireworks. 

Para mostrar ou ocultar uma barra de ferramentas: 


Escolher Janela > Barras de ferramentas e, em seguida, escolher uma barra de ferramentas. 


Para desencaixar uma barra de ferramentas: 
Arrastar a barra de ferramentas para fora do seu local de encaixe. 


Nota: Se a barra de ferramentas estiver desencaixada, clicar no botão Fechar do lado superior direito da barra para 
fechá-la. 


Para encaixar uma barra de ferramentas: 


rastar a barra de ferramentas para uma área de encaixe no topo, na base, à esquerda ou direita da 
Arrastar a barra de f t d t b da ou direita d 
janela do aplicativo até que o retângulo de visualização de posição apareça. 


Navegação e exibição de um documento 


É possível controlar a ampliação, o número de exibições e o modo de exibição do documento. 
Além disso, pode facilmente girar um documento, o que será útil se aumentar a exibição e não 
puder mais ver a tela inteira. 
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Zoom e giro 


O Fireworks permite aumentar e reduzir em uma porcentagem de ampliação predefinida ou 
definida pelo usuário. 


| Selecionar [P 
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Ferramenta Zoom Menu pop-up Zoom 


Ferramenta Mão 


Para aumentar usando incrementos predefinidos, seguir um destes procedimentos: 


* Escolher a ferramenta Zoom e clicar dentro da janela do documento para especificar o novo 
ponto central. Cada clique ampliará a imagem para o próximo nível de ampliação predefinido. 


* Escolher uma configuração de zoom no menu pop-up Definir ampliação na base da janela do 
documento. 


* Escolher Aumentar ou uma ampliação predefinida no menu Exibir. 


Para reduzir usando incrementos predefinidos, seguir um destes procedimentos: 


* Escolher a ferramenta Zoom e clicar com Alt (Windows) ou clicar com Option (Macintosh) 
dentro da janela do documento. Cada clique reduz a exibição para a próxima porcentagem 


predefinida. 


* Escolher uma configuração de zoom no menu pop-up Definir ampliação na base da janela do 
documento. 


* Escolher Reduzir ou uma ampliação predefinida no menu Exibir. 
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Para aumentar uma área específica sem a limitação de incrementos de zoom predefinidos: 
1 Escolher a ferramenta Zoom. 
2 Arrastar a parte da imagem que deseja ampliar. 


O tamanho da caixa de seleção de zoom determina a porcentagem precisa de ampliação, que é 
exibida na caixa de texto Definir ampliação. 


Nota: É possível inserir uma porcentagem de ampliação na caixa de texto Definir ampliação. 


Para reduzir baseado em uma área específica: 

Arrastar com a tecla Alt (Windows) ou com Option (Macintosh) uma área de seleção com a 
ferramenta Zoom. 

Para retornar à ampliação de 100%: 


Clicar duas vezes na ferramenta Zoom no painel Ferramentas. 


Para enquadrar o documento: 

1 Escolher a ferramenta Mão. 

2 Arrastar o ponteiro Mão. 
À medida que gira a tela, o enquadramento da exibição continua de maneira que seja possível 
trabalhar com os pixels ao longo da borda da tela. 

Para ajustar o documento na exibição atual: 


Clicar duas vezes na ferramenta Mão. 


Utilização de um modo de exibição para gerenciar o espaço de trabalho 


Os botões do modo de exibição na área de Exibição do painel Ferramentas permitem escolher 
entre os três modos de exibição para controlar o layout do espaço de trabalho: 


[5] Modo de tela padrão é a exibição padrão da janela do documento 


g| Modo tela cheia com menus é uma exibição maximizada da janela do documento contraposta a 
um fundo cinza com menus, barras de ferramentas, barras de rolagem e painéis visíveis. 


Modo tela cheia é uma exibição maximizada da janela do documento contraposta a um fundo 
O ç J T 
preto sem menus, barras de ferramentas ou barras de título. visíveis. 


Para alterar os modos de exibição, seguir um destes procedimentos: 


* Para alterar para o modo Tela cheia com menus, clicar no botão Modo tela cheia com menus 
no painel Ferramentas. 


* Para alterar para o Modo tela cheia, clicar no botão Modo tela cheia no painel Ferramentas. 


* Para retornar ao Modo de tela padrão, clicar com o botão direito do mouse (Windows) ou 
clicar com Control (Macintosh) na janela do documento e selecionar Sair do modo de tela 
cheia, ou clicar no botão Modo de tela padrão no painel Ferramentas. 
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Exibição de múltiplas exibições de documento 

Usar múltiplas exibições para ver um documento em diferentes ampliações simultaneamente. 
Alterações feitas em uma exibição refletirão automaticamente em todas as outras exibições do 
mesmo documento. 

Para abrir uma exibição adicional do documento em uma configuração de zoom diferente: 

1 Escolher Janela > Nova janela. 


2 Escolher uma configuração de zoom para a nova janela. 


Para colocar lado a lado as exibições do documento: 


Escolher Janela > Lado a lado horizontal ou Janela > Lado a lado vertical. 


Para fechar uma janela de exibição de documento: 


Clicar no botão Fechar da janela. 


Controle de redesenho do documento 

Os modos de exibição afetam a apresentação dos documentos na tela, mas não seus dados de objeto 
ou a qualidade da saída. 

Para controlar o redesenho do documento: 

Escolher Exibir > Tela inteira. 


Quando Tela inteira estiver selecionado, o Fireworks exibirá o documento em todas as cores 
disponíveis com todos os detalhes. Quando Tela inteira estiver desselecionado, o Fireworks exibirá 
o traçado com 1 pixel de largura sem preenchimento e imagens com um X dentrodelas. 


Modos de exibição e de rascunho 


Para exibir um documento como apareceria em uma plataforma diferente: 
e No Windows, escolher Exibir > Macintosh Gamma. 
e No Macintosh, escolher Exibir > Windows Gamma. 


O Fireworks mostra a visualização da aparência do documento na outra plataforma de 
comutador. Por exemplo, ao trabalhar na plataforma Windows, usar esse comando para 
visualizar a aparência de um documento na plataforma Macintosh. 
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Utilização do Mini-iniciador 


O Mini-iniciador contém ícones para abrir e fechar os painéis usados com maior fregiiência, 
inclusive os painéis Misturador de cores e Informações, Otimizar, Camadas, Biblioteca, Estilos e 
Comportamentos. Quando ativado, o Mini-iniciador está localizado na base da janela do 
documento. Por padrão, o Mini-iniciador não é visível. 


SnaDO 


Para exibir o Mini-iniciador: 
1 Escolher Editar > Preferências. 


2 Na guia Geral, escolher Mostrar ícones de guias na seção Espaço de trabalho e clicar em OK, 


Para abrir ou fechar um painel a partir do Mini-iniciador: 
Clicar no ícone correspondente do painel. 


Nota: O fundo do ícone do painel fica realçado enquanto o painel estiver aberto. 


Utilização da barra de status (somente Windows) 


Quando ativada, a barra de status é exibida na base da janela de aplicativo do Fireworks. Ela 
proporciona dicas e informações úteis sobre os objetos e ferramentas selecionados. Por padrão, a 
barra de status está desativada. 

Para ativar ou desativar a barra de status: 


Escolher Exibir > Barra de status. 


Para usar a barra de status: 


Selecionar um objeto ou ferramenta, ou mover o ponteiro sobre uma ferramenta no painel 
Ferramentas. 


As informações sobre o objeto ou operação selecionada são exibidas na barra de status. 


Alteração da tela 


Quando criar um novo documento do Fireworks, é necessário especificar suas características. 
Pode-se modificar o tamanho e a cor da tela e alterar a resolução da imagem a qualquer momento 
usando o menu Modificar ou o Inspetor de propriedades. À medida que trabalha com o 
documento, também é possível girar a tela e aparar partes indesejadas. 


Alteração de tamanho, cor e resolução da tela 


O Fireworks facilita a alteração do tamanho da tela, da cor da tela e da resolução da imagem. 


Para alterar o tamanho da tela: 
1 Seguir um destes procedimentos: 
è Escolher Modificar > Tela > Tamanho da tela. 


* Escolher Selecionar > Cancelar seleção, clicar na ferramenta Ponteiro para exibir as propriedades 
do documento no Inspetor de propriedades e, em seguida, clicar no botão Tamanho da tela. 


94 Capítulo 3 


Digitar as novas dimensões nas caixas de texto Largura e Altura. 


Clicar em um botão Âncora para especificar quais lados da tela o Fireworks adicionará ou 
excluirá e, em seguida, clicar em OK. 


Nota: Por padrão, a âncora central é selecionada, indicando que alterações no tamanho da tela foram feitas em 
todos os lados. 


Para alterar a cor da tela a partir do menu Modificar: 


1 


Escolher Modificar > Tela > Cor da tela. 


2 Escolher Branco, Transparente ou Personalizada. Se escolher Personalizada, clicar em uma cor 


na janela pop-up de amostras. 


Para selecionar a cor da tela a partir do Inspetor de propriedades: 


1 


Escolher Selecionar > Cancelar seleção, clicar na ferramenta Ponteiro para exibir as 
propriedades do documento no Inspetor de propriedades e, em seguida, clicar na caixa de cores 


Tela. 


Selecionar uma cor na janela pop-up de amostras ou clicar no conta-gotas em uma cor em 
qualquer lugar na tela. Para escolher uma tela transparente, clicar no botão Nenhum na janela 
pop-up de amostras. 


Para redimensionar um documento e todo o seu conteúdo: 


1 


Seguir um destes procedimentos: 


è Escolher Selecionar > Cancelar seleção, clicar na ferramenta Ponteiro para exibir as 


propriedades do documento no Inspetor de propriedades e, em seguida, clicar no botão 
Tamanho da imagem no Inspetor de propriedades. 


è Escolher Modificar > Tela > Tamanho da imagem. 


A caixa de diálogo Tamanho da imagem é aberta. 


Tamanho da imagem 


Dimensões do pixel: 


e Pixels 


1 | Pixels 


Tamanho da impressão: 


Pe Polegadas 


t i Polegadas 


Resolução: Pixels/Polegadas 


Limitar proporções 


Dar novo exemplo de imagem Bicúbico 


2 Nas caixas de texto Dimensões do pixel, digitar novas dimensões horizontal e vertical. 


É possível alterar as unidades de medida. Se Amostrar imagem novamente estiver desmarcado, 
será possível alterar a resolução ou o tamanho de impressão, mas não as dimensões do pixel. 
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3 Nas caixas de texto Tamanho da impressão, digitar as dimensões horizontal e vertical da 
imagem para imprimir. 


4 Na caixa de texto Resolução, digitar uma nova resolução para a imagem. 


Também é possível escolher entre as unidades pixels/polegada e pixels/cm, ou selecionar 
Amostrar imagem novamente. Alterar a resolução também altera as dimensões de pixel. 


5 Seguir um destes procedimentos: 


* Para manter a mesma proporção entre as dimensões horizontal e vertical do documento, 
escolher Limitar proporções. 


e Cancelar a seleção Limitar proporções para redimensionar largura e altura de forma 
independente. 


6 Selecionar Amostrar imagem novamente para adicionar ou remover pixels ao redimensionar a 
imagem, para proporcionar uma aparência aproximadamente igual em um tamanho diferente. 


7 Clicar em OK. 


Sobre fazer uma nova amostragem 


Fazer uma nova amostragem no Fireworks difere da maioria dos aplicativos de edição de imagens. 
O Fireworks contém objetos de imagem bitmap baseados em pixels e objetos vetoriais baseados 
em traçados. 


* Quando for feita uma nova amostragem de um objeto bitmap, deverão ser adicionados ou 
removidos pixels do objeto para aumentá-lo ou diminuí-lo. 


* Quando for feita uma nova amostragem de um objeto vetorial, ocorrerá pouca perda de 
qualidade porque o traçado será redesenhado matematicamente com um tamanho maior ou 
menor. 


Como os atributos de objetos vetoriais no Fireworks são visíveis como pixels, alguns traços ou 
preenchimentos ficam ligeiramente diferentes depois da nova amostragem porque os pixels que 
compõem o traço ou preenchimento devem ser redesenhados. 


Nota: Guias, objetos de ponto ativo e objetos de fatia são redimensionados quando o tamanho da imagem do 
documento for alterado. 


Redimensionar objetos bitmap sempre apresenta um problema sui generis — adicionar ou 
remover pixels para redimensionar a imagem, ou alterar o número de pixels por polegada ou 
centímetro? 


Pode-se alterar o tamanho de uma imagem bitmap ajustando a resolução ou fazendo uma nova 
amostragem da imagem. Ao ajustar a resolução, o usuário na verdade altera o tamanho dos pixels na 
imagem para que mais ou menos pixels se encaixem em um determinado espaço. O ajuste da 
resolução sem fazer uma nova amostragem não resulta em perda de dados. 


Aumentar a resolução, ou adicionar pixels para aumentar a imagem, pode causar perda de 
qualidade porque os pixels adicionados nem sempre correspondem à imagem original. 


Reduzir a resolução ou remover pixels para diminuir a imagem, sempre provoca perda de 
qualidade porque pixels estão sendo descartados para redimensionar a imagem. A perda de dados 
na imagem é outro efeito colateral da redução de resolução. 
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Giro da tela 


Girar a tela é útil quando uma imagem importada está invertida ou de lado. É possível girar a tela 
em 180 graus, 90 graus no sentido horário ou 90 graus no sentido anti-horário. 


Quando girar a tela, todos os objetos do documento giram. 


Para girar a tela, seguir um destes procedimentos: 
è Escolher Modificar > Tela > Girar 180º. 

è Escolher Modificar > Tela > Girar 90º SH. 

è Escolher Modificar > Tela > Girar 90º SAH. 


Como aparar a tela 


Se o documento tiver espaço adicional em volta do conteúdo da tela, será possível aparar a tela. 
Também é possível remover o espaço vazio da tela cortando o documento. Para mais informações 
sobre como cortar, consultar “Corte de um documento” na página 98. 


Original; Tela aparada 


Para aparar a tela: 
Escolher Modificar > Tela > Aparar tela. 


As partes da tela que se estenderem além dos pixels extremos do documento serão removidos 
automaticamente. Cada borda da tela é cortada até as bordas do objeto ou objetos no documento. 
Se o documento tiver mais de uma moldura, o recurso Aparar tela fará o corte para incluir todos 
os objetos em todas as molduras, e não apenas a moldura atual. 


Ajuste da tela 


É possível expandir a tela para encaixar objetos que ultrapassem seus limites. 


Para ajustar a tela: 


Escolher Modificar > Tela > Ajustar tela. 
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Corte de um documento 


Com a ferramenta Cortar, é possível excluir partes indesejadas de um documento. A tela é 
redimensionada para ajustar-se a uma área definida. 


Por padrão, o corte exclui objetos que ultrapassem os limites da tela. Pode-se manter objetos fora 
da tela alterando a preferência antes de cortar. 
Para cortar um documento: 


1 Escolher a ferramenta Cortar no painel Ferramentas ou escolher Editar > Cortar documento. 


2 Arrastar uma caixa delimitadora na tela. Ajustar as alças de corte até que a caixa delimitadora 
envolva a área do documento que deseja manter. 


3 Clicar duas vezes dentro da caixa delimitadora ou pressionar Enter para cortar o documento. 
A tela é redimensionada para a área definida e os objetos além das bordas da tela são excluídos. 


Dica: É possível manter objetos fora da tela cancelando a seleção Excluir objetos ao cortar na guia Edição da 
caixa de diálogo Preferências antes de cortar. Para mais informações sobre preferências, consultar “Configuração 
de preferências” na página 421. 


Utilização de um menu contextual 


Os menus contextuais permitem acessar rapidamente comandos importantes para a seleção atual. 


Editar > 
Ampliação » 
Selecionar » 
Ocultar seleção Ctrl+L 

Ocultar bordas F9 

Organizar » 
Transformar » 
Agrupar Ctri+G 

Desagrupar Ctrl+-Shift+G 
Converter em símbolo F8 

Animação > 
Símbolo » 
Inserir ponto ativo Ctrl+-shift+U 
Inserir fatia Alt+Shift+U 

Nivelar seleção Ctri+Alt+Shift+Z 


Para exibir um menu contextual: 


Clicar com o botão direito do mouse (Windows) ou clicar com Control (Macintosh) em um item 
selecionado na janela do documento. 
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Utilização de réguas, guias e a grade 


É possível usar réguas e guias para posicionar objetos da forma mais precisa possível e para ajudá- 
lo a desenhar. É possível colocar guias no documento e alinhar objetos às guias ou ativar a grade 
do Fireworks e alinhar objetos a ela. 


A Sem título-1.png é 10 
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Utilização de uma régua 


As réguas o ajudam a medir, organizar e planejar o layout do seu trabalho. Como as imagens do 
Fireworks têm como objetivo a utilização na Web, onde os gráficos são medidos em pixels, as 
réguas no Fireworks sempre medem em pixels, independentemente da unidade de medida usada 
ao criar o documento. 


Para mostrar e ocultar réguas: 


Escolher Exibir > Réguas. 
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Réguas vertical e horizontal aparecem ao longo das margens da janela do documento. 
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Utilização de uma guia 


Guias são linhas que o usuário arrasta na tela do documento a partir das réguas. Elas servem de 
apoio ao desenho para ajudá-lo a colocar e alinhar objetos. Usar as guias para marcar partes 
importantes do documento, como as margens, o ponto central do documento e áreas em que deseja 
executar um trabalho preciso. 


Para ajudá-lo a alinhar objetos, o Fireworks permite alinhar objetos às guias. É possível evitar que 
as guias sejam movidas acidentalmente bloqueando-as. 


Nota: Guias não permanecem em uma camada, tampouco são exportadas com um documento. Elas são apenas 
ferramentas de desenho. 


O Fireworks também tem guias de fatia, que permitem fatiar um documento para usar na Web. 
Contudo, guias normais de imagem são diferentes de guias de fatia. Para mais informações sobre 
guias de fatia, consultar “Movimentação de guias de fatia para editar fatias” na página 267. 

Para criar uma guia horizontal ou vertical: 

1 Clicar e arrastar a régua correspondente. 


2 Posicionar a guia na tela e soltar o botão do mouse. 


Nota: É possível reposicionar a guia arrastando-a novamente. 


Para mover uma guia para uma posição específica: 
1 Clicar duas vezes na guia. 


2 Digitar a nova posição na caixa de diálogo Mover guia e clicar em OK. 
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Para mostrar ou ocultar guias: 


Escolher Exibir > Guias > Mostrar guias. 


Para alinhar objetos às guias: 


Escolher Exibir > Guias > Alinhar às guias. 


Para alterar cores da guia: 
1 Escolher Exibir > Guias > Editar guias. 


2 Selecionar a nova cor de guia na janela pop-up da caixa de cores e clicar em OK. 


Para bloquear ou desbloquear todas as guias: 


Escolher Exibir > Guias > Bloquear guias. 


Para remover uma guia: 


Arrastar a guia para fora da tela. 


Utilização da grade 


A grade do Fireworks exibe um sistema de linhas horizontais e verticais na tela. A grade é útil para 
posicionar precisamente objetos. Além disso, é possível exibir, editar, redimensionar e alterar a cor 


da grade. 


Nota: A grade não permanece em uma camada, tampouco é exportada com um documento. Ela é meramente uma 
ferramentade desenho. 


Para mostrar e ocultar a grade: 


Escolher Exibir > Grade > Mostrar grade. 


Para alinhar objetos à grade: 
Escolher Exibir > Grade > Alinhar à grade. 


Para alterar a cor da grade: 
1 Escolher Exibir > Grade > Editar grade. 


2 Selecionar a nova cor da grade na janela pop-up da caixa de cores e clicar em OK. 


Para alterar o tamanho das células da grade: 
1 Escolher Exibir > Grade > Editar grade. 
2 Digitar os valores apropriados nas caixas de texto de espaçamento horizontal e vertical e clicar 
em OK. 
Utilizar o painel Histórico para desfazer e repetir várias ações 


Com o painel Histórico, pode-se exibir, modificar e repetir as ações tomadas para criar o 
documento. O painel Histórico lista as ações mais recentes executadas no Fireworks, até atingir o 
número especificado no campo Etapas de desfazer na caixa de diálogo Preferências do Fireworks. 


Com o painel Histórico, é possível fazer um dos seguintes: 


e Desfazer e refazer rapidamente as ações mais recentes. 
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* Escolher ações recém executadas no painel Histórico e clicar em Reproduzir para repeti-las. 


e Copiar comandos selecionados para a Área de transferência como o equivalente de texto 
JavaScript. 


* Salvar um grupo de ações recém executadas como um comando personalizado e escolhê-lo no 
menu Comando para reutilizar o grupo como um comando simples. Para mais informações 
sobre como criar comandos usando o painel Histórico, consultar “Scripts com o painel 
Histórico” na página 416. 


Traço 
Cor de preenchimento 
[C Ferramenta Retângulo 


[7] Transformar 


A Ferramenta Texto 


k Mover 


=] Cor de preenchimento 


Reproduzir 


Para desfazer e refazer ações: 
1 Escolher Janela > Histórico para abrir o painel Histórico. 


2 Arrastar o marcador para cima e para baixo. 


Para repetir ações: 

1 Executar as ações. 

2 Para realçar as ações a serem repetidas no painel Histórico, seguir um destes procedimentos: 

e Clicar em uma ação para realçá-la. 

e Clicar com Control (Windows) ou clicar com Command (Macintosh) para realçar várias ações 
individuais. 

e Clicar com Shift para realçar um intervalo contínuo de ações. 


3 Clicar no botão Reproduzir na parte inferior do painel Histórico. 


Para salvar ações para serem reutilizadas: 
1 Realçar as ações a serem salvas no painel Histórico. 
2 Clicar no botão Salvar na parte inferior do painel. 


3 Digitar o nome do comando e clicar em OK. 


Para usar o comando personalizado salvo: 


Escolher o nome do comando no menu Comandos. 
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CAPÍTULO 4 
Seleção e transformação de um objeto 


À medida que trabalhar no Macromedia Fireworks MX, será necessário manipular objetos bitmap 
e vetoriais, blocos de texto, fatias e pontos ativos, e áreas de pixels. Com a utilização das 
ferramentas de seleção e transformação é possível mover, copiar, excluir, girar, dimensionar ou 
inclinar objetos. Em documentos com objetos múltiplos, o usuário pode organizar os objetos 
empilhando-os, agrupando-os e alinhando-os. 


Seleção de um objeto 


Antes de executar algum procedimento em qualquer objeto da tela, é necessário selecioná-lo. Isso 
se aplica a um objeto vetorial, traçado ou pontos; um bloco de texto, uma palavra ou letra; uma 
fatia ou um ponto ativo; uma ocorrência; ou um objeto bitmap. 


É possível usar qualquer um destes recursos para selecionar objetos: 


O painel Camadas exibe cada objeto. É possível clicar em um objeto no painel Camadas para ele 
ser selecionado quando for aberto e as camadas serem estendidas. Para mais informações, 
consultar Capítulo 10, “Camada, mascaramento e mistura”, na página 221. 


A ferramenta Ponteiro seleciona objetos quando se clicar neles ou quando arrastar uma área de seleção 


k ao redor dos objetos. 
A ferramenta Selecionar secundário seleciona um objeto individual dentro de um grupo ou os pontos de 
R um objeto vetorial. 
my A ferramenta Selecionar atrás seleciona um objeto que está atrás de outro. 
=? A ferramenta Área de exportação seleciona uma área a ser exportada como um arquivo separado. 


Para informações sobre como selecionar áreas específicas de pixels dentro de uma imagem bitmap, 
consultar “Seleção de um pixel” na página 106. 

Uso da ferramenta Ponteiro 
A ferramenta Ponteiro seleciona objetos quando o usuário clica neles ou quando arrasta uma área 
de seleção ao redor de parte dos objetos. 
Para selecionar um objeto por meio de um clique, seguir um destes procedimentos: 
* Mover a ferramenta Ponteiro sobre o traçado ou caixa delimitadora do objeto e dar um clique. 
e Clicar na borda ou preenchimento do objeto. 


* Selecionar o objeto no painel Camadas. 
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Dica: Para visualizar o que será selecionado ao clicar em um objeto abaixo do ponteiro da tela, é necessário 
selecionar a opção Realçar mouse na guia Edição da caixa de diálogo Preferências. Para mais informações 
sobre preferências, consultar “Configuração de preferências” na página 421. 


Para selecionar objetos arrastando: 


Arrastar a ferramenta Ponteiro para incluir um ou mais objetos na área de seleção. 


w 


Uso da ferramenta Selecionar secundário 


Usar a ferramenta Selecionar secundário para selecionar, mover ou modificar pontos em um 
traçado vetorial ou em um objeto que pertença a um grupo. 


Para mover ou modificar objetos com a ferramenta Selecionar secundário: 


1 
2 


Selecionar a ferramenta Selecionar secundário. 

Fazer uma seleção. 

As alças de seleção serão exibidas. 

Seguir um destes procedimentos: 

Para modificar um objeto, arrastar um dos pontos ou alças de seleção. 


Para mover todo o objeto, arrastar em qualquer parte do objeto, exceto um ponto ou alça de 
seleção. 


Uso da ferramenta Selecionar atrás 


Ao trabalhar em gráficos que contêm vários objetos, é possível usar a ferramenta Selecionar atrás 
para selecionar um objeto que esteja oculto ou obscurecido por outros objetos. 


Para selecionar um objeto que está atrás de outros objetos: 


Clicar repetidamente na ferramenta Selecionar atrás sobre os objetos empilhados, passando pelos 
objetos do topo à base na ordem de empilhamento, até selecionar o objeto desejado. 


Nota: Também é possível selecionar um objeto de difícil acesso clicando no painel Camadas quando as camadas 
forem expandidas. 


Informações de seleção no Inspetor de propriedades 


Sempre que o usuário seleciona um objeto, o Inspetor de propriedades identifica a seleção. A área 
superior esquerda do Inspetor de propriedades contém as seguintes informações sobre a seleção: 


Uma descrição do item em inspeção 
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e Uma caixa de texto para digitar o nome do item 


Nota: O nome aparecerá na barra de título do documento sempre que esse item for selecionado. Para fatias e 
botões, o nome é o nome do arquivo quando exportado. 


* O número de objetos quando mais de um objeto for selecionado 


Nota: Se a barra de status estiver ativada (apenas Windows), os objetos selecionados também serão identificados 
na barra de status na base da janela do documento. 


Caminho È Vá Nenhum v 2 E: |M [tpixer acentu: ~] al 100|M | Normal v] © 


|| Borda: | Borda: |. |0 |M | Efeitos: +, 


wle | x [155 | bp] Textura: | Aniagem x] o iv 
He | Y/g0 nsparente se 


O Inspetor de propriedades também exibe informações e configurações sobre o tipo de objeto 
selecionado. Por exemplo, quando se seleciona um traçado vetorial, o Inspetor de propriedades 
exibe as propriedades do traçado vetorial como largura do traço e cor. 


Modificação de uma seleção 


Após selecionar um único objeto, é possível adicionar objetos à seleção e cancelar a seleção de 
objetos selecionados. Com um único comando é possível selecionar ou cancelar toda a seleção em 
cada uma das camadas de um documento. Além disso, pode-se ocultar o caminho de seleção para 
editar um objeto selecionado enquanto exibe a forma como ele aparecerá na Web ou impressão. 


Para adicionar a uma seleção: 


Manter a tecla Shift pressionada enquanto clica em objetos adicionais com a ferramenta Ponteiro, 
Selecionar secundário ou Selecionar atrás. 


Para cancelar a seleção de um objeto e deixar outros objetos selecionados: 


Manter a tecla Shift pressionada, enquanto clica no objeto selecionado. 


Para selecionar tudo em todas as camadas do documento: 
Escolher Selecionar > Selecionar tudo. 


Nota: Selecionar tudo não seleciona objetos ocultos. 


Para cancelar a seleção de todos os objetos selecionados: 
Escolher Selecionar > Cancelar seleção. 


Nota: Além disso, é necessário cancelar a seleção da preferência Edição de camada única para selecionar todos os 
objetos visíveis em todas as camadas de um documento. Quando a preferência Edição de camada única for 
escolhida, apenas objetos da camada atual são selecionados. Para mais informações, consultar “Organização de 
uma camada” na página 224. 


Para ocultar a avaliação da seleção de traçado de um objeto selecionado: 
Selecionar Exibir > Ocultar bordas. 


Nota: Usar o painel Camadas ou o Inspetor de propriedades, para identificar o objeto selecionado quando o 
contorno e os pontos estiverem ocultos. 
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Para ocultar objetos selecionados: 
Selecionar Exibir > Ocultar seleção. 


Nota: Os objetos ocultos não são exportados. (Isso não se aplica a objetos de ponto ativo e de fatia na Camada da Web.) 
Para exibir todos os objetos: 


Selecionar Exibir > Mostrar tudo. 


Dica: Para ocultar objetos selecionados ou não, clicar ou arrastar ao longo da coluna do olho no painel Camadas. 


Seleção de um pixel 


É possível editar pixels na tela inteira ou escolher uma das ferramentas de seleção para restringir a 
edição a uma determinada área da imagem: 


an A ferramenta Moldura da caixa de seleção seleciona uma área retangular de pixels em uma imagem. 


(a A ferramenta Moldura oval da caixa de seleção seleciona uma área elíptica de pixels em uma imagem. 
le] A ferramenta Laço seleciona uma área de pixels de forma livre em uma imagem. 

[5] A ferramenta Laço polígono seleciona uma área de pixels de forma livre com borda reta em uma imagem. 
IN] A ferramenta Varinha mágica seleciona uma área de pixels coloridos semelhantes em uma imagem. 


As ferramentas de seleção de pixel desenham uma moldura de seleção que define a área de pixels 
selecionada. Depois de desenhar a moldura de seleção, é possível manipulá-la por meio da 
movimentação, adição ou colocação de outra seleção. Você pode editar pixels dentro da seleção, 
aplicar filtros aos pixels ou apagar pixels sem afetar os pixels que ultrapassam a seleção. Além disso, 
pode criar uma seleção de pixels flutuante que pode ser editada, movida, recortada ou copiada. 


Opções da ferramenta de seleção de bitmap 


Quando selecionar a ferramenta Moldura da caixa de seleção, Moldura oval da caixa de seleção, 
Laço, Laço polígono ou Varinha mágica, o Inspetor de propriedades exibe três opções de borda 
para a ferramenta: 


Acentuada cria uma seleção de moldura com uma borda definida. 
Suavização de serrilhado evita bordas dentadas na seleção de moldura. 
Enevoar permite suavizar a borda da seleção de pixels. 


Antes de criar uma seleção enevoada com a ferramenta Seleção, definir a opção Enevoar. É 
possível enevoar as seleções existentes com o comando Enevoar do menu Selecionar. Para mais 
informações, consultar “Enevoamento de uma seleção de pixel” na página 113. 


Quando selecionar a ferramenta Moldura da caixa de seleção, Moldura oval da caixa de seleção ou 
Varinha mágica, o Inspetor de propriedades também exibe três opções de estilo: 


Normal permite criar uma moldura de seleção em que a altura e a largura são independentes. 


Proporção fixa restringe a altura e a largura a proporções definidas. 
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Tamanho fixo estabelece a altura e a largura em uma dimensão definida. 


Nota: A ferramenta Varinha mágica também possui configuração de Tolerância. Para mais informações, consultar 
“Seleção de uma área com cores semelhantes” na página 109. 


Criação de moldura de seleção de pixel 


As ferramentas Moldura da caixa de seleção, Moldura oval da caixa de seleção e Laço na seção 
Bitmap do painel Ferramentas permitem a seleção de áreas de pixel de uma imagem bitmap 
arrastando uma moldura em volta delas. 

Para selecionar uma área retangular ou elíptica de pixels: 


1 Selecionar a ferramenta Moldura da caixa de seleção ou Moldura oval da caixa de seleção. 


2 Definir as opções Estilo e Borda no Inspetor de propriedades. Para mais informações, consultar 
“Opções da ferramenta de seleção de bitmap” na página 106. 


3 Arrastar para desenhar uma moldura de seleção, que define a seleção de pixel. 


Manter a tecla Shift pressionada enquanto arrasta a ferramenta Moldura da caixa de seleção ou 
Moldura oval da caixa de seleção para desenhar molduras quadradas ou circulares. Para 
desenhar uma moldura a partir de um ponto central, cancelar a seleção de outras molduras 
ativas e, em seguida, manter a tecla Alt (Windows) ou Option (Macintosh) pressionada 
enquanto desenha. 


Para selecionar uma área de forma livre de pixels: 


1 Selecionar a ferramenta Laço. 


2 Selecionar uma opção de Borda no Inspetor de propriedades. Para mais informações, consultar 
“Opções da ferramenta de seleção de bitmap” na página 106. 
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3 Arrastar o ponteiro em torno dos pixels que deseja selecionar. 


Plotagem de um ponto para criar uma seleção de moldura 

A ferramenta Laço polígono permite a seleção de determinados pixels em uma imagem bitmap 
clicando várias vezes em volta do perímetro da área de pixel a ser selecionada. 

Para selecionar uma área poligonal de pixels: 

1 Selecionar a ferramenta Laço polígono. 


2 Selecionar uma opção de Borda no Inspetor de propriedades. Para mais informações, consultar 
“Opções da ferramenta de seleção de bitmap” na página 106. 


3 Clicar para plotar pontos em volta do perímetro do objeto ou área para contornar a seleção. 


Manter a tecla Shift pressionada para restringir os segmentos da moldura do Laço polígono a 
incrementos de 45 graus. 


4 Seguir um destes procedimentos para fechar o polígono: 
e Clicar no ponto inicial. 


e Clicar duas vezes no espaço de trabalho. 
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Seleção de uma área com cores semelhantes 


A ferramenta Varinha mágica permite a seleção de áreas de pixels com cores semelhantes. Pelo 
ajuste das opções Borda e Tolerância da Varinha mágica no Inspetor de propriedades, é possível 
controlar a forma como essa ferramenta seleciona os pixels. 

Para selecionar uma área de pixels de faixas de cores semelhantes: 

1 Selecionar a ferramenta Varinha mágica. 


2 Selecionar uma opção de Borda no Inspetor de propriedades. Para mais informações, consultar 
“Opções da ferramenta de seleção de bitmap” na página 106. 


3 Definir o nível de tolerância arrastando o controle deslizante de tolerância no Inspetor de 
propriedades. 


Tolerância representa a faixa de tons de cores que são selecionadas quando um pixel é clicado 
com a Varinha mágica. Se digitar 0 e clicar em um pixel, apenas os pixels adjacentes que 
tenham exatamente o mesmo tom serão selecionados. Se digitar 65, uma faixa mais ampla de 
tons será selecionada. 


4 Clicar na área de cor que deseja selecionar. 


Uma moldura aparecerá em torno da faixa de pixels selecionada. 


Pixels selecionados com um nível de tolerância mais baixo (acima), depois uma tolerância mais alta 


(abaixo) 
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Para selecionar cores semelhantes no documento: 


1 Selecionar uma área de cor com a ferramenta Moldura da caixa de seleção ou Laço, ou com a 
Varinha mágica. 


2 Escolher Selecionar > Selecionar similar. 


Uma ou mais molduras selecionam todas as áreas que contêm a faixa de pixels selecionada, de 
acordo com a configuração atual da opção Tolerância no Inspetor de propriedades para a 
ferramenta Varinha mágica. 


Nota: Para ajustar a tolerância do comando Selecionar similar, selecionar a ferramenta Varinha mágica e depois, 
antes de usar o comando, alterar a configuração de Tolerância no Inspetor de propriedades. 


Remoção de uma seleção de moldura 


É possível remover uma moldura sem afetar o documento. 


Para remover uma moldura, seguir um destes procedimentos: 

e Desenhar outra moldura. 

e Clicar fora da seleção atual com uma ferramenta Moldura da caixa de seleção ou Laço. 
e Pressionar Esc. 


* Escolher Selecionar > Cancelar seleção. 


Ajuste de uma moldura de seleção 


Após selecionar pixels com a ferramenta Moldura da caixa de seleção ou Laço, é possível editar ou 
mover a borda da moldura sem afetar os pixels embaixo dela. Você pode adicionar ou excluir 
manualmente pixels da borda da moldura usando teclas modificadoras. 


Além disso, é possível expandir ou contrair a borda da moldura em um valor especificado, 
selecionar uma área adicional de pixels em torno da moldura existente ou suavizar a borda da 
moldura. 


Como mover uma moldura 


É possível mover uma moldura para colocá-la em uma área de pixels diferente. 


Para mover uma moldura, seguir um destes procedimentos: 


e Arrastar a moldura com a ferramenta Moldura da caixa de seleção ou Laço, ou com a 
ferramenta Varinha mágica. 


è Usar as teclas de seta para deslocar a moldura a incrementos de 1 pixel. 


è Pressionar a tecla Shift e usar as teclas de seta para movê-la a incrementos de 10 pixels. 


Ajuste da seleção de moldura com a barra de espaços 

É possível reposicionar com facilidade uma moldura durante o arraste dela pressionando a barra 
de espaços enquanto desenha. 

Para reposicionar a seleção com a barra de espaços: 

1 Iniciar o arraste para desenhar a seleção. 


2 Sem soltar o botão do mouse, manter a barra de espaços pressionada. 
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3 Arrastar a moldura para outro local da tela. 
4 Enquanto mantém o botão do mouse pressionado, liberar a barra de espaços. 


5 Continuar arrastando para desenhar a seleção. 


Adição a uma seleção de pixel 

Depois de desenhar uma moldura de seleção com qualquer ferramenta de seleção de bitmap, será 
possível fazer adições à seleção com a mesma ferramenta ou com outra ferramenta de seleção de 
bitmap. 

Para fazer adição a uma seleção de pixel existente: 

1 Selecionar qualquer ferramenta de seleção de bitmap. 

2 Manter a tecla Shift pressionada e desenhar molduras de seleção adicionais. 


3 Repetir as etapas 1 e 2 com qualquer ferramenta de seleção de bitmap para continuar a adição à 
seleção. 


Molduras sobrepostas se unem para formar uma moldura contínua. 


Subtração de pixels de uma seleção 

É possível subtrair pixels de uma seleção ou perfurar partes de uma seleção, definindo áreas de 
pixel dentro da moldura original que não farão mais parte da seleção. 

Para subtrair pixels de uma seleção: 


Manter pressionada a tecla Alt (Windows) ou Option (Macintosh) e usar uma ferramenta de 
seleção de bitmap para selecionar a área de pixel a ser perfurada. 


Criação de uma moldura a partir de interseções de molduras 
Você pode selecionar pixels dentro de uma moldura existente desenhando uma moldura que 


sobreponha a original. 


Para selecionar uma área de pixels definida pela área de interseção de duas molduras: 


1 Manter as teclas Alt+Shift (Windows) ou Option+Shift (Macintosh) pressionadas enquanto 
cria uma nova seleção de moldura que sobreponha a moldura original. 
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ar 
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2 Soltar o botão do mouse. 


Apenas os pixels na área de interseção das duas molduras são selecionados. 


Moldura retangular; moldura retangular após interseção da moldura circular 


Uso de miniaturas e teclas modificadoras para modificar seleções de pixel 


Com um bitmap selecionado, é possível criar uma seleção de pixel nesse bitmap usando a 
opacidade de qualquer objeto ou máscara do painel Camadas. Para mais informações sobre o 
painel Camadas, consultar “Como trabalhar com uma camada” na página 221. 


Para criar ou substituir uma seleção de pixel em um bitmap selecionado usando a opacidade de 
um objeto: 


1 No painel Camadas, posicionar o ponteiro sobre a miniatura do objeto a ser usado para criar a 
seleção de pixel. 


2 Manter a tecla Control (Windows) ou Command (Macintosh) pressionada. 
O ponteiro é alterado para indicar que irá selecionar o canal alfa ou a área opaca do objeto. 
3 Clicar na miniatura. 


A nova seleção de pixel é criada no bitmap selecionado. 


Para fazer uma adição à seleção de pixel atual: 


Clicar com a tecla Control-Shift (Windows) ou Command-Shift (Macintosh) na miniatura de 
um objeto no painel Camadas para adicionar a forma da área opaca à seleção de pixel atual. 


Dica: Quando posicionado sobre a miniatura com as teclas modificadoras especificadas pressionadas, o ponteiro 
indica que o usuário irá fazer uma adição à seleção de pixel. 


Para fazer uma subtração da seleção de pixel atual: 


Clicar com a tecla Control-Alt (Windows) ou Command-Option (Macintosh) na miniatura de 
um objeto no painel Camadas para subtrair a forma da área opaca da seleção de pixel atual. 


Dica: Quando posicionado sobre a miniatura com as teclas modificadoras especificadas pressionadas, o ponteiro 
indica que o usuário irá fazer uma subtração na seleção de pixel. 
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Para criar uma seleção de pixel em um bitmap selecionado a partir da interseção de objetos 
sobrepostos: 


1 Clicar com a tecla Control (Windows) ou Command (Macintosh) na miniatura de um objeto 
para selecionar o canal alfa ou a área opaca. 


2 Clicar com a tecla Control-Shift-Alt (Windows) ou Command-Shift-Option (Macintosh) em 
outro objeto. 


Uma seleção de pixel é criada no bitmap selecionado a partir da interseção das áreas opacas dos 
dois objetos sobrepostos. 


Dica: Quando posicionado sobre a miniatura com as teclas modificadoras especificadas pressionadas, o 
ponteiro indica que o usuário irá criar uma seleção de pixel a partir da interseção das áreas opacas de dois 
objetos sobrepostos. 


Criação de uma seleção de pixel inversa 

Tendo como ponto de partida a seleção de pixel atual, é possível criar outra seleção de pixel que 
selecione todos os pixels não selecionados atualmente. Pode-se usar este método para selecionar 
todos os pixels em volta da seleção original, por exemplo, e depois apagá-los. 

Para criar uma seleção de pixel inversa: 

1 Fazer uma seleção de pixel usando qualquer ferramenta de seleção de bitmap. 

2 Escolher Selecionar > Selecionar inverso. 


Todos os pixels que não estavam na seleção original agora estão selecionados. 


Enevoamento de uma seleção de pixel 
O enevoamento cria um efeito de transparência visual nos pixels selecionados. Ao usar o comando 
Enevoar, pode-se experimentar várias quantidades de enevoamento e exibir os resultados antes de 
cancelar a seleção de pixels. Além disso, é possível enevoar uma seleção definindo uma quantidade 
de enevoamento no Inspetor de propriedades antes de usar uma ferramenta de seleção de bitmap. 
Para mais informações, consultar “Opções da ferramenta de seleção de bitmap” na página 106. 
Para enevoar uma seleção de pixel: 
1 Escolher Selecionar > Enevoar. 
2 Digitar uma quantidade em Enevoar na caixa de diálogo Enevoar. 
O tamanho da moldura de seleção é alterado para refletir a quantidade de enevoamento. 
3 Se necessário, alterar o número na caixa de diálogo Enevoar para ajustar a quantidade. 
4 Clicar em OK. 
Dica: Para exibir a aparência da seleção enevoada sem os pixels à volta, escolher Selecionar > Selecionar Inverso, 
e, em seguida, pressionar Excluir. É possível usar o painel Histórico ou Editar > Desfazer para tentar novamente. 
Expansão ou retração de uma moldura 
Uma vez que tiver desenhado uma moldura para selecionar pixels, será possível expandir ou 
contrair sua borda. 
Para expandir a borda de uma moldura: 


1 Após desenhar a moldura, escolher Selecionar > Expandir moldura da caixa de seleção. 


Seleção e transformação de um objeto 113 


2 Digitar o número de pixels que deseja expandir a borda da moldura e clicar em OK. 


Para contrair a borda de uma moldura: 
1 Após desenhar a moldura, escolher Selecionar > Contrair moldura da caixa de seleção. 


2 Digitar o número de pixels que deseja contrair na borda da moldura e clicar em OK. 


Seleção de uma área em torno de uma moldura existente 


Pode-se criar uma moldura adicional, com uma largura especificada, para emoldurar uma 
moldura existente. Isso permite criar efeitos gráficos especiais, como enevoamento das bordas de 
uma seleção de pixels. 


Moldura original; depois do enquadramento com outra moldura 


Para selecionar uma área em torno de uma moldura existente: 
1 Após desenhar a moldura, escolher Selecionar > Borda da moldura da caixa de seleção. 


2 Digitar a largura da moldura que deseja colocar em torno da moldura existente e clicar em OK. 


Suavização da borda de uma moldura 


É possível eliminar o excesso de pixels ao longo das bordas de uma seleção de pixel. Isso será útil se 
aparecerem pixels em excesso ao longo da borda de uma seleção de pixels ou moldura, após o uso 
da ferramenta Varinha mágica. 


Uma seleção de pixels antes e depois da suavização 
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Para suavizar a borda de uma moldura: 
1 Escolher Selecionar > Suavizar moldura. 


2 Digitar um raio de amostragem para especificar o grau de suavização desejado e clicar em OK. 


Transferência de uma seleção de moldura 

É possível transferir uma seleção de moldura de um bitmap para outro objeto bitmap na mesma 
camada ou um em uma camada diferente. Além disso, pode-se transferir a seleção da moldura 
para uma máscara. 

Para transferir uma seleção de moldura para outro objeto bitmap: 


1 Fazer uma seleção desenhando a moldura. 


2 No painel Camadas, selecionar um objeto bitmap diferente na mesma camada ou um objeto 
em uma camada diferente. 


A moldura é transferida para esse objeto. 


Nota: O Fireworks trata máscaras e objetos mascarados como objetos separados. Para mais informações sobre 
máscaras, consultar “Mascaramento de imagens” na página 227. 


Salva e recuperação de seleções de moldura 


É possível salvar o tamanho, a forma e o local de uma seleção para reaplicá-la futuramente. 


Para salvar uma seleção de moldura: 


Escolher Selecionar > Salvar seleção de bitmap. 


Para restaurar uma seleção de moldura: 
Escolher Selecionar > Restaurar seleção de bitmap. 


Nota: Só é possível salvar uma seleção de cada vez. 


Criação e movimentação de uma seleção de pixel flutuante 
Quando arrastar uma moldura para uma outra posição, a própria moldura será movida. Para mover, 
editar, recortar ou copiar uma seleção de pixels, transformar primeiro os pixels em seleção flutuante. 
Para criar uma seleção de pixel flutuante: 
1 Fazer uma seleção de pixel com uma ferramenta de seleção de bitmap. 
2 Seguir um destes procedimentos: 


e Manter pressionada a tecla Control (Windows) ou Command (Macintosh) e arrastar a seleção 
com qualquer ferramenta da seção Bitmap do painel Ferramentas. 


e Selecionar a ferramenta Ponteiro e arrastar a seleção. 


Para mover uma seleção flutuante, seguir um destes procedimentos: 


e Arrastar a seleção flutuante com a ferramenta Ponteiro ou com qualquer ferramenta de seleção 


de bitmap. 


* Se uma ferramenta que não selecionar bitmap estiver ativa, manter a tecla Control (Windows) 
ou Command (Macintosh) pressionada e arrastar a seleção flutuante. 


Seleção e transformação de um objeto 115 


* Usar as teclas de seta ou as teclas de seta+Shift. 


Quando cancelar a seleção de pixel flutuante ou selecionar qualquer ferramenta vetorial ou da 
Web, a seleção flutuante se tornará parte do objeto bitmap atual. 


Inserção de um novo bitmap por meio de recorte ou cópia 
É possível inserir um novo bitmap com base em uma seleção de pixel na camada atual do 
documento através de recorte e cópia dos pixels selecionados. 
Para inserir um novo bitmap recortando e colando uma seleção de pixel: 
1 Selecionar uma área de pixels usando uma ferramenta de seleção de pixel. 
2 Selecionar Editar > Inserir > Bitmap através de recorte. 


Um novo objeto bitmap é criado na camada atual com base na seleção de pixel e os pixels 
selecionados são removidos do objeto bitmap original. No painel Camadas, uma miniatura do 
novo bitmap aparece na camada atual, acima do objeto do qual foi recortado. 

Para inserir um novo bitmap copiando e colando uma seleção de pixel: 

1 Selecionar uma área de pixels usando uma ferramenta de seleção de pixel. 


2 Selecionar Editar > Inserir > Bitmap através de recorte. 


Um novo objeto bitmap é criado na camada atual com base na seleção de pixel e os pixels 
selecionados permanecem no objeto bitmap original. No painel Camadas, uma miniatura do 
novo bitmap aparece na camada atual, acima do objeto do qual foi copiado. 


Edição de objetos selecionados 
O Fireworks oferece diversas maneiras para editar objetos selecionados. Você pode mover objetos 
na tela ou de um aplicativo para outro, inclusive, replicar objetos com os comandos Clonar e 
Duplicar, ou ainda remover objetos do espaço de trabalho em conjunto. 
Para mover uma seleção, seguir um destes procedimentos: 
e Arrastar a seleção com as ferramentas Ponteiro, Selecionar secundário ou Selecionar atrás. 
è Pressionar qualquer tecla de seta para mover a seleção em incrementos de 1 pixel. 


e Manter a tecla Shift pressionada enquanto pressiona qualquer tecla de seta para mover a seleção 
a incrementos de 10 pixels. 


e No Inspetor de propriedades, digitar as coordenadas X e Y para a localização do canto esquerdo 
superior da seleção. 


e Digitar as coordenadas X e Y no painel Informações. Se as caixas X e Y não estiverem visíveis, 
arrastar a borda da inferior do painel. 

Para mover ou copiar objetos selecionados colando: 

1 Selecionar um objeto ou vários objetos. 

2 Selecionar Editar > Recortar ou Editar > Copiar. 


3 Selecionar Editar > Colar. 
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Para duplicar um ou mais objetos selecionados: 
Selecionar Editar > Duplicar. 


Durante a repetição do comando, aparecem duplicatas do objeto selecionado organizadas em 
cascata a partir do original, dispostas 10 pixels abaixo e 10 pixels à direita da duplicata anterior. O 
objeto duplicado mais recente passa a ser o objeto selecionado. 


Nota: Não é possível usar os comandos Duplicar ou Clonar com seleções de bitmaps. Usar a ferramenta Selecionar 
secundário ou Carimbo para duplicar partes de uma imagem bitmap. Para mais informações sobre como usar a 
ferramenta Selecionar secundário, consultar os procedimentos a seguir. 


Para duplicar um objeto selecionado arrastando: 

Arrastar com a tecla Alt (Windows) ou Option (Macintosh) o objeto usando a ferramenta 

Ponteiro. 

Para duplicar a seleção de pixel, seguir um destes procedimentos: 

è Arrastar a seleção de pixel usando a ferramenta Selecionar secundário. 

è Arrastar com a tecla Alt (Windows) ou Option (Macintosh) o objeto usando a ferramenta 
Ponteiro. 

Para clonar uma seleção: 


Selecionar Editar > Clonar. 


O clone da seleção está empilhado exatamente na frente do original e passa a ser o objeto 
selecionado. 


Dica: Para afastar um clone selecionado do original com precisão pixel por pixel, usar as teclas de seta ou teclas de 


seta+Shift. Essa é uma forma conveniente para manter uma distância específica entre os clones ou o alinhamento 
vertical ou horizontal dos clones. 


Para excluir objetos selecionados, seguir um destes procedimentos: 

è Pressionar a tecla Delete ou Backspace. 

e Selecionar Editar > Limpar. 

è Selecionar Editar > Recortar. 

e Clicar com o botão direito do mouse (Windows) ou com Control (Macintosh) no objeto e 
selecionar Editar > Recortar no menu contextual. 

Para cancelar ou cancelar a seleção de uma seleção, seguir um destes procedimentos: 

* Escolher Selecionar > Cancelar seleção. 


e Se estiver usando a ferramenta Moldura da caixa de seleção, Moldura oval da caixa de seleção e 
Laço, clicar em qualquer lugar da imagem fora da área selecionada. 


è Pressionar Esc. 
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Transformação e distorção de objetos selecionados e seleções 


É possível transformar um grupo ou objeto selecionado, ou uma seleção de pixel usando as 
ferramentas Dimensionar, Inclinar e Distorcer e os comandos de menu: 


[2] Dimensionar aumenta ou reduz um objeto. 


7 Inclinar inclina um objeto ao longo de um eixo especificado. 


57 enquanto a ferramenta estiver ativa. Isso é útil na criação de efeito 3-D. 


Distorcer move os lados ou cantos de um objeto na direção em que uma alça de seleção for arrastada 


Na seleção de qualquer ferramenta de transformação ou comando de menu Transformar são 
exibidas as alças de transformação em volta dos objetos selecionados. 


e— Alças de transformação 


n Ponto central 


Objeto girado, dimensionado, inclinado, distorcido e virado na vertical e na horizontal 


Para transformar objetos selecionados usando as alças de transformação: 


1 Selecionar uma ferramenta de transformação. 


À medida que mover o ponteiro nas alças de seleção, ou perto delas, esse será transformado 


para indicar a transformação atual. 
2 Para transformar os objetos, seguir um destes procedimentos: 
e Posicionar o ponteiro próximo a um ponto de canto e depois arrastá-lo para girar. 


e Arrastar a alça de transformação para executar a ação de acordo com a ferramenta de 
transformação ativa. 


3 Clicar duas vezes dentro da janela ou pressionar Enter para aplicar as alterações. 
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Redimensionamento (colocação em escala) de objetos 
A colocação de um objeto em escala aumenta ou reduz o objeto na horizontal, na vertical ou nos 
dois sentidos. 
Para colocar um objeto selecionado em escala: 
1 Exibir as alças de transformação: 


e Selecionar a ferramenta Dimensionar. 


è Selecionar Modificar > Transformar > Dimensionar. 
2 Arrastar as alças de transformação: 


* Para dimensionar o objeto na horizontal e na vertical, arrastar uma das alças de canto. As 
proporções serão limitadas a tecla Shift for pressionada durante o dimensionamento. 


e Para dimensionar o objeto na horizontal ou vertical, arrastar uma alça lateral. 


Nota: Também é possível redimensionar objetos selecionados pela digitação de dimensões no Inspetor de 
propriedades. Para mais informações, consultar “Transformação de um objeto numericamente” na página 120. 


Como girar objetos 


Ao girar um objeto ele gira em torno de seu ponto central. Para girar um objeto, arrastar suas alças 
de transformação ou selecionar um ângulo predefinido. 


Nota: Também é possível girar o documento na tela. Para mais informações, consultar “Giro da tela” na página 97. 


Para girar um objeto selecionado em 90 ou 180 graus: 


Selecionar Modificar > Transformar e selecionar o comando Girar no submenu. 


Para girar um objeto selecionado por arraste: 


1 Selecionar qualquer ferramenta de transformação. 


2 Mover o ponteiro para fora do objeto até o ponteiro de rotação aparecer. 


3 Arrastar o ponteiro para girar o objeto. 
Dica: Para limitar a rotação a incrementos de 15 graus em relação ao horizonte, arrastar a tecla Shift com o ponteiro. 


4 Clicar duas vezes dentro da janela ou pressionar Enter para aplicar as alterações. 


Para reposicionar o eixo de rotação: 


Arrastar o ponto central para longe do centro. 


Para redefinir o eixo de rotação no centro da seleção, seguir um destes procedimentos: 


e Clicar duas vezes no ponto central. 


è Pressionar Esc para cancelar a seleção do objeto, depois selecioná-lo novamente. 
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Inverter objetos 


É possível inverter um objeto no seu eixo vertical ou horizontal, sem mover sua posição relativa na tela. 


Para inverter um objeto selecionado: 


Selecionar Modificar > Transformar > Inverter horizontalmente ou Inverter verticalmente. 


Inclinação de um objeto 


Quando um objeto é inclinado, ele é transformado, pois é inclinado ao longo de um ou dos dois 
eixos horizontal e vertical. 

Para inclinar um objeto selecionado: 

1 Seguir um destes procedimentos para exibir as alças de transformação: 

e Selecionar a ferramenta Inclinar. 

e Selecionar Modificar > Transformar > Inclinar. 

2 Arrastar uma alça para inclinar o objeto. 


3 Clicar duas vezes dentro da janela ou pressionar Enter para remover as alças de transformação. 


Para obter a ilusão de perspectiva: 


Arrastar um ponto de canto. 


Distorção de um objeto 


Para alterar o tamanho e as proporções de um objeto, arrastar uma alça de seleção com a ferramenta 
Distorcer. 

Para distorcer um objeto selecionado: 

1 Seguir um destes procedimentos para exibir as alças de transformação: 

è Selecionar a ferramenta Distorcer. 

è Selecionar Modificar > Transformar > Distorcer. 

2 Arrastar uma alça para distorcer o objeto. 


3 Clicar duas vezes dentro da janela ou pressionar Enter para aplicar as alterações. 


Transformação de um objeto numericamente 


Em vez de arrastar para dimensionar, redimensionar ou girar um objeto, é possível transformá-lo 
utilizando valores específicos. 


Para redimensionar objetos selecionados usando o Inspetor de propriedades ou o painel 
Informações: 
Digitar novas medidas de largura (L) ou altura (A). 


Nota: Se as caixas L e A não estiverem visíveis no Inspetor de propriedades, clicar na seta expansora para visualizar 
todas as propriedades. 
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Para dimensionar ou girar objetos selecionados usando a Transformação numérica: 
1 Selecionar Modificar > Transformar > Transformação numérica. 
A caixa de diálogo Transformação numérica é aberta. 


2 No menu pop-up, selecionar o tipo de transformação a ser executada na seleção atual: 
Dimensionar, Redimensionar ou Girar. 


3 Selecionar Limitar proporções para manter proporcional o tamanho horizontal e vertical ao 
dimensionar ou redimensionar uma seleção. 


4 Selecionar Atributos de escala para transformar o preenchimento, traço e efeitos do objeto 
junto com ele. 


5 Cancelar a seleção de Atributos de escala para transformar apenas o traçado. 


6 Digitar valores numéricos para transformar a seleção, depois clicar em OK. 


Exibição de informações de transformação no painel Informações 


O painel Informações permite a exibição de informações de transformação numérica do objeto 
atualmente selecionado. As informações são atualizadas à medida que o objeto é editado. 


* Para dimensionar e liberar transformações, o painel Informações mostra a largura (L) e altura 
(A) do objeto original antes da transformação e a porcentagem de aumento ou diminuição da 
largura e altura durante a transformação. 


* Para inclinar e distorcer, o painel Informações mostra o ângulo de inclinação a incrementos de 
um grau e as coordenadas do ponteiro X e Y durante a transformação. 
Para exibir informações de transformação durante a transformação de uma seleção: 


Selecionar Janela > Informações. 


Organização de um objeto 


Ao trabalhar com vários objetos dentro de um único documento, é possível usar diversas técnicas 
para organizar o documento: 


e É possível agrupar objetos individuais para tratá-los como um único objeto ou proteger a 
relação de cada objeto com os outros objetos do grupo. 


e Você pode organizar objetos atrás ou na frente de outros objetos. O modo de organização dos 
objetos é chamado de ordem de empilhamento. 


e É possível alinhar objetos selecionados em uma área da tela, no eixo vertical ou horizontal. 
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Como agrupar um objeto 


É possível agrupar objetos individuais selecionados e, em seguida, manipulá-los como se fossem 
um único objeto. Por exemplo, depois de desenhar as pétalas de uma flor como objetos 
individuais, poderá agrupá-las para facilitar a seleção e mover a flor inteira como um único objeto. 


Você pode editar grupos sem agrupá-los. Além disso, pode selecionar um objeto individual em um 
grupo para edição, sem agrupar os objetos. Pode, inclusive, desagrupar os objetos a qualquer 
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Agrupamento de objetos selecionados como um único objeto 


Para agrupar dois ou mais objetos selecionados: 


Selecionar Modificar > Agrupar. 


Para desagrupar objetos selecionados: 


Selecionar Modificar > Desagrupar. 


Seleção de um objeto dentro de grupos 


Para trabalhar com objetos individuais em um grupo, pode-se desagrupar os objetos ou usar a 
ferramenta Selecionar secundário para selecionar objetos individuais enquanto deixa o grupo intacto. 


Ferramenta Selecionar secundário 


Quando os atributos de um objeto selecionado secundariamente são modificados, somente esse 
objeto é alterado, não o grupo inteiro. Mover um objeto selecionado secundariamente para outra 
camada removerá o objeto do grupo. 


Seleção secundária de um objeto em um grupo 
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Para selecionar um objeto que faz parte de um grupo: 


Selecionar a ferramenta Selecionar secundário e clicar no objeto, ou arrastar uma área de seleção 
ao seu redor. Para adicionar objetos ou cancelar a seleção deles em uma seleção, manter a tecla 
Shift pressionada enquanto clica ou arrasta. 


Para selecionar o grupo que contém um objeto selecionado secundário, seguir um destes 
procedimentos: 


e Clicar com o botão direito do mouse (Windows) ou com Control (Macintosh) em qualquer 
lugar no grupo e escolher Selecionar > Seleção principal no menu de contexto. 


è Escolher Selecionar > Selecionar principal. 
Para selecionar todos os objetos dentro de um grupo selecionado, seguir um destes 
procedimentos: 


e Clicar com o botão direito do mouse (Windows) ou com Control (Macintosh) em qualquer 
lugar no grupo e escolher Selecionar > Selecionar secundário no menu de contexto. 


è Escolher Selecionar > Selecionar secundário. 


Empilhamento de um objeto 


Dentro de uma camada, o Fireworks empilha objetos com base na ordem em que foram criados, 
sendo o objeto criado mais recentemente inserido no topo da pilha. A ordem de empilhamento 
dos objetos determina a maneira como eles aparecem quando sobrepostos. 


As camadas também afetam a ordem de empilhamento. Por exemplo, se um documento tiver duas 
camadas chamadas Camada 1 e Camada 2, e a Camada 1 estiver listada abaixo da camada 2 no 
painel Camadas, então, tudo o que estiver na camada 2 aparecerá na frente de tudo o que estiver 
na Camada 1. Para alterar a ordem das camadas arrastar a camada no painel Camadas para uma 
nova posição. Para mais informações, consultar “Organização de uma camada” na página 224. 
Para alterar a ordem de empilhamento de um objeto ou grupo selecionado em uma camada: 


è Selecionar Modificar > Organizar > Trazer para frente ou Enviar para trás para mover o objeto 
ou grupo para o topo ou para a base da ordem de empilhamento. 


è Selecionar Modificar > Organizar > Avançar ou Recuar para mover o objeto ou grupo uma 
posição acima ou abaixo na ordem de empilhamento. 


Quando mais de um objeto ou grupo for selecionado, os objetos se movem na frente ou atrás de 
todos os objetos não selecionados enquanto mantêm a ordem relativa entre eles. 


Alinhamento de um objeto 


Os comandos Alinhar do menu Modificar oferecem uma ampla gama de opções de organização 
permitindo a execução de qualquer um destes procedimentos: 


Alinhar objetos ao longo do eixo horizontal ou vertical. 


Alinhar objetos selecionados verticalmente, na borda direita, no centro ou na borda esquerda, ou 
horizontalmente, na borda superior, no centro ou na borda inferior. 


Nota: Bordas são determinadas pelas caixas delimitadoras incluídas em cada objeto selecionado. 
Distribuir objetos selecionados de forma que seus centros ou bordas fiquem eqiiidistantes. 


É possível aplicar um ou mais comandos Alinhar a objetos selecionados. 
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Para alinhar objetos selecionados, seguir um destes procedimentos: 


è Selecionar Modificar > Alinhar > Esquerda para alinhar os objetos na extremidade esquerda do 
objeto selecionado. 


è Selecionar Modificar > Alinhar > Centralizado vertical para alinhar os pontos centrais dos 
objetos no eixo vertical. 


è Selecionar Modificar > Alinhar > Direita para alinhar os objetos na extremidade direita do 
objeto selecionado. 


è Selecionar Modificar > Alinhar > Topo para alinhar os objetos na extremidade superior do 
objeto selecionado. 


è Selecionar Modificar > Alinhar > Centralizado horizontal para alinhar os pontos centrais dos 
objetos no eixo horizontal. 


è Selecionar Modificar > Alinhar > Base para alinhar os objetos na extremidade inferior do 
objeto selecionado. 
Para distribuir igualmente as larguras ou alturas de três ou mais objetos selecionados: 


Selecionar Modificar > Alinhar > Distribuir larguras ou Modificar > Alinhar > Distribuir alturas. 


Sobre como organizar os objetos entre camadas 


O painel Camadas oferece outra dimensão de controle organizacional. Você pode mover objetos 

selecionados de uma camada para outra arrastando a miniatura do objeto ou o indicador azul de 

seleção no painel Camadas para outra camada. Para mais informações, consultar “Organização de 
uma camada” na página 224. 
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CAPÍTULO 5 
Como trabalhar com um bitmap 


Bitmaps são gráficos compostos de pequenos quadrados coloridos chamados de pixels, que se 
combinam como osladrilhos deum mosaico paracriarumaimagem. Exemplos degráficosdebitmap 
incluem fotografias, imagens digitalizadas e gráficos criados em programas de pintura. Às vezes, 
eles são chamados imagens de varredura. 


O Macromedia Fireworks MX combina a funcionalidade de aplicativos de pintura, desenho de vetor 
e edição de fotos. Há várias opções para criar imagens bitmap: desenhar e pintar com ferramentas de 
bitmap, converter objetos vetoriais em imagens bitmap ou abrir ou importar imagens. 


O Fireworks dispõe de um sofisticado conjunto de Efeitos ao vivo para ajuste de cores e tons, além 
de uma ampla gama de métodos para retocar imagens bitmap, inclusive cortar, enevoar e duplicar 
ou clonar imagens. Além disso, agora o Fireworks incorpora um novo conjunto de ferramentas de 
retoque de imagem — Embaçar, Aguçar, Clarear, Escurecer e Mancha. 


Os métodos para seleção e transformação de imagens e pixels são descritos em Capítulo 4, 
“Seleção e transformação de um objeto”, na página 103. 


Como trabalhar com um bitmap 


A seção Bitmap do painel Ferramentas contém ferramentas de seleção e edição de bitmap. Para 
editar os pixels de um bitmap no documento, escolher uma ferramenta na seção Bitmap. Ao 
contrário de versões anteriores do Fireworks, não é preciso alternar deliberadamente entre o modo 
bitmap e o modo vetorial, mas ainda assim é possível trabalhar com bitmaps, objetos vetoriais e 
texto. Alternar para o modo apropriado é tão simples quanto escolher uma ferramenta vetorial ou 
de bitmap no painel Ferramentas. 

Nota: Versões anteriores do Fireworks exibem uma borda listrada ao redor da tela para indicar que o Fireworks está 


no modo bitmap. Se preferir ver a conhecida borda listrada ao trabalhar com bitmaps, o usuário poderá escolher 
Opções de bitmap > Exibir borda listrada na categoria Editar da caixa de diálogo Preferências. 


Criação de um objeto bitmap 


Há várias maneiras de criar gráficos de bitmap: usar as ferramentas de desenho e pintura de 
bitmap do Fireworks; recortar ou copiar e colar seleções de pixels; ou converter uma imagem 
vetorial em um objeto bitmap. Uma outra forma de criar um objeto bitmap é inserir uma imagem 
bitmap vazia no documento e, depois, desenhá-la, pintá-la ou preenchê-la. 


Ao ser criado, o novo objeto bitmap é adicionado à camada atual. O painel Camadas, com as camadas 
expandidas, mostra uma miniatura e o nome de cada objeto bitmap abaixo da camada na qual ele 
reside. Embora alguns aplicativos de bitmap considerem cada objeto bitmap como uma camada, o 
Fireworks organiza os objetos bitmap e vetoriais e o texto como objetos separados que residem em 
camadas. Para mais informações, consultar “Como trabalhar com uma camada” na página 221. 
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Para criar um novo objeto bitmap: 


1 
2 


Escolher a ferramenta Pincel ou Lápis na seção Bitmap do painel Ferramentas. 
Pintar ou desenhar com a ferramenta Pincel ou Lápis para criar objetos bitmap na tela. 


Um novo objeto bitmap é adicionado à camada atual no painel Camadas. Para mais informações 
sobre como usar as ferramentas Lápis ou Pincel, consultar “Desenho, pintura e edição de um 
objeto bitmap” na página 127. 


É possível criar um novo bitmap vazio e, depois, desenhar ou pintar pixels nele. 


Para criar um objeto bitmap vazio, seguir um destes procedimentos: 


Clicar no botão Nova imagem bitmap no painel Camadas. 
Escolher Editar > Inserir > Bitmap vazio. 


Desenhar uma moldura de caixa de seleção, começando em uma área em branco da tela, e 
preenchê-la. Para mais informações, consultar “Criação de moldura de seleção de pixel” na 
página 107. 


Um bitmap vazio é adicionado à camada atual no painel Camadas. Se o bitmap vazio for 
desselecionado antes de quaisquer pixels serem desenhados, importados ou colocados de 
alguma outra forma nele, o objeto bitmap vazio desaparecerá automaticamente do painel 
Camadas e do documento. 


Para recortar ou copiar pixels e colá-los como um novo objeto bitmap: 


1 


Fazer uma seleção de pixels com a ferramenta Laço, Moldura da caixa de seleção ou Varinha 
mágica. 


Para mais informações, consultar “Seleção de um pixel” na página 106. 
Seguir um destes procedimentos: 

Escolher Editar > Recortar e, em seguida, Editar > Colar. 

Escolher Editar > Copiar e, em seguida, Editar > Colar. 


Escolher Editar > Inserir > Bitmap através de cópia, para copiar a seleção atual em um novo 
bitmap. 


Escolher Editar > Inserir > Bitmap através de recorte, para recortar a seleção atual e colocá-la em um 
novo bitmap. 
A seleção aparece no painel Camadas como um objeto da camada atual. 


Nota: Uma outra alternativa é clicar com o botão direito do mouse (Windows) ou clicar com Control (Macintosh) 
em uma moldura da caixa de seleção de pixel e escolher uma opção de recorte ou cópia no menu contextual. 
Para mais informações sobre as opções Bitmap através de recorte e Bitmap através de cópia, consultar 
“Inserção de um novo bitmap por meio de recorte ou cópia” na página 116. 


Para converter objetos vetoriais selecionados em uma imagem bitmap, seguir um destes 
procedimentos: 


Escolher Modificar > Nivelar seleção. 
Escolher Nivelar seleção no menu Opções do painel Camadas. 


A conversão de vetor em bitmap é irreversível, exceto quando Editar > Desfazer ou desfazer 
ações no painel Histórico ainda for uma opção. Imagens bitmap não podem ser convertidas em 
objetos vetoriais. 
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Desenho, pintura e edição de um objeto bitmap 


A seção Bitmap do painel Ferramentas contém ferramentas que selecionam, desenham, pintam e 
editam pixels em uma imagem bitmap. 


Desenho de um objeto bitmap 


O usuário pode utilizar a ferramenta Lápis para desenhar linhas retas, limitadas ou de forma livre 
de um pixel, praticamente da mesma maneira que usa um lápis verdadeiro para desenhar uma 
linha com bordas acentuadas. Ele também pode aumentar um bitmap e clicar na ferramenta Lápis 
para editar pixels individuais. 
Para desenhar um objeto com a ferramenta Lápis: 

1 Escolher a ferramenta Lápis. 
2 Definir as opções da ferramenta no Inspetor de propriedades: 


Sem serrilhado suaviza as bordas das linhas desenhadas. 


Apagar automaticamente usa a cor do preenchimento quando a ferramenta Lápis é clicada na 
cor do traço. 


Preservar transparência restringe a ferramenta Lápis a desenhar apenas em pixels existentes, e 
não nas áreas transparentes de um gráfico. 


3 Arrastar para desenhar. Manter pressionada a tecla Shift e arrastar para restringir o traçado a 
uma linha diagonal, horizontal ou vertical. 


Pintura de um objeto bitmap 


A ferramenta Pincel pinta um traço de pincel com a cor da caixa Cor do traço, enquanto a 
ferramenta Lata de tinta altera a cor de pixels selecionados para a cor na caixa Cor de 
preenchimento. A ferramenta Dégradé preenche objetos bitmap ou vetoriais com uma 
combinação de cores em padrões ajustáveis. 


Para pintar um objeto com a ferramenta Pincel: 


1 Escolher a ferramenta Pincel. 


2 Definir os atributos de traço no Inspetor de propriedades. 

3 Arrastar para pintar. 
Para mais informações sobre como definir opções da ferramenta Pincel, consultar “Como 
trabalhar com um traço” na página 198. 

Para alterar a cor dos pixels para a cor na caixa Cor de preenchimento: 

[6] 1 Escolher a ferramenta Lata de tinta. 

2 Escolher uma cor na caixa Cor de preenchimento. 

3 Definir o valor de tolerância no Inspetor de propriedades. 
Nota: A tolerância determina como pixels com cores semelhantes devem ser preenchidos. Um valor de 


tolerância baixo preenche os pixels com valores da cor semelhantes ao pixel clicado. Um valor de tolerância alto 
preenche os pixels com uma faixa mais ampla de valores da cor. 
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4 


Clicar na imagem. 


Todos os pixels dentro da faixa de tolerância mudam para a cor de preenchimento. 


Para aplicar um preenchimento dégradé a uma seleção de pixels: 


1 


[a] 2 


Fazer a seleção. 

Escolher a ferramenta Dégradé. 

Definir os atributos de preenchimento no Inspetor de propriedades. 
Clicar na seleção de pixels para aplicar o preenchimento. 


As ferramentas Lata de tinta e Dégradé também podem preencher objetos vetoriais 
selecionados. Para mais informações sobre como criar, aplicar e editar preenchimentos dégradé, 
consultar “Como trabalhar com um preenchimento” na página 204. 


Amostragem de cor para usar como cor do traço ou preenchimento 


A ferramenta Conta-gotas pode fazer amostragem de cor de uma imagem para designar uma nova 
cor do traço ou preenchimento. Há várias opções à sua escolha: fazer amostragem da cor de um 
único pixel, uma média de valores da cor dentro de uma área de 3 por 3 pixels ou uma média de 
valores da cor dentro de uma área de 5 por 5 pixels. 


Para fazer amostragem de uma cor de traço ou preenchimento: 


1 


3 


Se o atributo correto ainda não estiver ativo, seguir um destes procedimentos: 


Clicar no ícone Traço ao lado da caixa Cor do traço no painel Ferramentas para torná-lo o atributo 
ativo. 


Clicar no ícone Preenchimento ao lado da caixa Cor de preenchimento no painel Ferramentas 
para torná-lo o atributo ativo. 

Nota: Não clicar na caixa de cor propriamente dita. Caso contrário, o ponteiro conta-gotas que aparecerá não 
será a ferramenta Conta-gotas. Para informações sobre o ponteiro conta-gotas da caixa de cor, consultar 
“Amostragem de uma cor em uma janela pop-up de cores” na página 198. 


Abrir um documento do Fireworks ou qualquer arquivo que o Fireworks possa abrir. Para mais 
informações, consultar “Abertura de um gráfico criado em outros aplicativos” na página 77. 


Escolher a ferramenta Conta-gotas na seção Bitmap do painel Ferramentas. Definir a 
configuração Média de cores de amostragem no Inspetor de propriedades. 


1 pixel cria uma cor de preenchimento ou traço a partir de um único pixel. 


3x3 pixels cria uma cor de preenchimento ou traço a partir da média de valores da cor dentro de 
uma área de 3 por 3 pixels. 


5x5 pixels cria uma cor de preenchimento ou traço a partir da média de valores da cor dentro de 
uma área de 5 por 5 pixels. 


Clicar a ferramenta Conta-gotas em qualquer parte do documento. 


O exemplo de cor aparece em todas as caixas Cor do traço ou Cor de preenchimento do 
Fireworks. 
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Como apagar um objeto bitmap 


Uma das utilidades da ferramenta Borracha é remover pixels. Por padrão, o ponteiro da 
ferramenta Borracha representa o tamanho da borracha atual, mas é possível alterar seu tamanho e 
aparência na caixa de diálogo Preferências. Para mais informações, consultar “Edição de 
preferências” na página 422. 


Ferramenta Borracha 


Para apagar pixels em um objeto bitmap selecionado ou em uma seleção de pixels: 
1 Escolher a ferramenta Borracha. 
No Inspetor de propriedades, escolher a forma de borracha redonda ou quadrada. 


Arrastar o controle deslizante Borda para definir a suavidade da borda da borracha. 


2 

3 

4 Arrastar o controle deslizante Tamanho para definir o tamanho da borracha. 

5 Arrastar o controle deslizante Opacidade do apagador para definir o grau de opacidade. 
6 


Arrastar a ferramenta Borracha sobre os pixels que deseja apagar. 


Enevoamento de uma seleção de pixels 


O enevoamento desfoca as bordas de uma seleção de pixels e ajuda a misturar a área selecionada com 
os pixels que a envolvem. O recurso de enevoamento é útil durante o processo de copiar uma seleção 
e colá-la em outro fundo. 


Para enevoar as bordas de uma seleção de pixels ao fazer essa seleção: 
1 Escolher uma ferramenta de seleção de bitmap no painel Ferramentas. 
2 Escolher Enevoar no menu pop-up Borda do Inspetor de propriedades. 


3 Arrastar o controle deslizante para definir o número de pixels que deseja embaçar ao longo da 
borda da seleção. 


4 Fazer uma seleção. 
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Para enevoar as bordas de uma seleção de pixels a partir da barra de menus: 
1 Escolher Selecionar > Enevoar. 


2 Digitar um valor na caixa de diálogo Enevoar seleção, para definir o raio de enevoamento, e 
clicar em OK. 


O valor do raio determina o número de pixels que são enevoados de cada lado da borda da seleção. 


Retoque de um bitmap 


O Fireworks incorpora uma ampla gama de ferramentas que irão ajudá-lo a retocar suas imagens. 
Há várias opções à sua escolha: alterar o tamanho de uma imagem, reduzir ou aguçar seu foco, ou 
copiar e “carimbar” uma parte dela em outra área. 


€ A ferramenta Carimbo copia ou clona uma área de uma imagem em outra. 


ô A ferramenta Embaçar reduz o foco das áreas selecionadas em uma imagem. 


ZA A ferramenta Mancha seleciona uma cor e a empurra na direção em que o usuário arrasta em uma imagem. 


[4] A ferramenta Aguçar aguça áreas de uma imagem. 


[51 A ferramenta Clarear clareia partes de uma imagem. 


A ferramenta Escurecer escurece partes de uma imagem. 


Clonagem de um pixel 


A ferramenta Carimbo clona uma área de uma imagem bitmap de modo que seja possível carimbá-la 
em outra parte da imagem. Clonar pixels é útil para corrigir fotos arranhadas ou remover poeira de 
uma imagem; é possível copiar uma área de pixels de uma foto e substituir o ponto arranhado ou 
com poeira por uma área clonada. 


Para clonar partes de uma imagem bitmap: 

1 Escolher a ferramenta Carimbo. 

2 Clicar em uma área para designá-la como origem, ou como a área que deseja clonar. 
O ponteiro de amostragem se transforma em um ponteiro em forma de cruz. 


Nota: Para designar uma outra área de pixels para clonar, manter pressionada a tecla Alt (Windows) ou Option 
(Macintosh) e clicar em outra área de pixels a fim de designá-la como origem. 


3 Ir para outra parte da imagem e arrastar o ponteiro. 


Aparecem dois ponteiros. O primeiro, a origem da clonagem, tem forma de cruz. “Edição de 
preferências” na página 422. 


Dependendo das preferências de pincel selecionadas, o segundo ponteiro será um carimbo, 
uma cruz ou um círculo azul. À medida que ele é arrastado, os pixels sob o primeiro ponteiro 
são copiados e aplicados à área sob o segundo. 
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Para definir as opções da ferramenta Carimbo: 


1 


Escolher a ferramenta Carimbo. 


2 Escolher uma das seguintes opções no Inspetor de propriedades: 


Tamanho determina o tamanho do carimbo. 
Borda determina a suavidade do traço (100% é acentuado; 0% é suave). 


Origem alinhada afeta a operação de amostragem. Quando a opção Origem alinhada está 
selecionada, o ponteiro de amostragem move-se vertical e horizontalmente alinhado com o 
segundo. Quando ela está desselecionada, a área de amostragem fica fixa, independentemente do 
local para onde o usuário for e clicar no segundo ponteiro. 


Usar documento inteiro faz uma amostragem de todos os objetos em todas as camadas. Quando 
esta opção está desselecionada, a ferramenta Carimbo faz a amostragem apenas do objeto ativo. 


Opacidade determina quanto do fundo pode ser visto através do traço. 


Modo Misturar afeta a forma como a imagem clonada afeta o fundo. 


Para duplicar uma seleção de pixels, seguir um destes procedimentos: 


è Arrastar a seleção de pixels com a ferramenta Subseleção. 


* Manter pressionada a tecla Alt (Windows) ou Option (Macintosh) e arrastar a seleção de pixels 


com a ferramenta Ponteiro. 


Como embaçar, aguçar e manchar um pixel 


As ferramentas Embaçar e Aguçar afetam o foco dos pixels. A ferramenta Embaçar acentua ou 
desacentua partes de uma imagem embaçando, de forma seletiva, o foco dos elementos, 
praticamente da mesma maneira que um fotógrafo controla a profundidade de campo. A 
ferramenta Aguçar pode ser útil para resolver problemas de digitalização ou fotografias fora de 
foco. A ferramenta Mancha mistura suavemente as cores, como se criasse um reflexo da imagem. 


Para embaçar ou aguçar uma imagem: 


1 
2 


Escolher a ferramenta Embaçar ou Aguçar. 

Definir as opções de pincel no Inspetor de propriedades: 

Tamanho define o tamanho da ponta do pincel. 

Borda especifica a suavidade da ponta do pincel. 

Forma define uma forma quadrada ou redonda para a ponta do pincel. 
Intensidade define a quantidade de embaçamento ou aguçamento. 
Arrastar a ferramenta sobre os pixels a serem aguçados ou embaçados. 


Dica: Manter pressionada a tecla Alt (Windows) ou Option (Macintosh) alternará o comportamento da ferramenta. 


Para manchar as cores de uma imagem: 


1 
2 


Escolher a ferramenta Mancha. 

Definir as opções da ferramenta no Inspetor de propriedades: 
Tamanho especifica o tamanho da ponta do pincel. 

Forma define uma forma quadrada ou redonda para a ponta do pincel. 


Borda especifica a suavidade da ponta do pincel. 
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Pressão define a intensidade do traço. 


Cor da mancha mancha com uma cor especificada no início de cada traço. Se esta opção estiver 
desselecionada, a ferramenta usará a cor sob o ponteiro ferramenta. 


Usar documento inteiro mancha com os dados das cores de todos os objetos em todas as 
camadas. Se esta opção estiver desselecionada, a ferramenta Mancha usará a cor apenas do 
objeto ativo. 


3 Arrastar a ferramenta sobre os pixels a serem manchados. 


Clareamento e escurecimento de um pixel 


A ferramenta Clarear ou Escurecer clareia ou escurece partes de uma imagem, respectivamente. 
Esse processo é semelhante à técnica de câmara escura de adicionar ou retirar luz de uma 
fotografia. 

Para clarear ou escurecer partes de uma imagem: 


1 Escolhera ferramenta Clarear para clarear partes de uma imagem, ou a ferramenta Escurecer para 
escurecê-las. 


2 Definir as opções de pincel no Inspetor de propriedades: 
Tamanho define o tamanho da ponta do pincel. 
Forma define uma forma quadrada ou redonda para a ponta do pincel. 
Borda especifica a suavidade da ponta do pincel. 

3 Definir a exposição no Inspetor de propriedades. 


A exposição varia de 0% a 100%. Para um efeito mais brando, especificar um valor percentual 
mais baixo; para um efeito mais forte, especificar um valor mais alto. 


4 Definir a faixa no Inspetor de propriedades: 

Sombras altera principalmente as partes escuras da imagem. 

Realces altera principalmente as partes claras da imagem. 

Meios-tons altera principalmente a faixa intermediária por canal na imagem. 
5 Arrastar sobre a parte da imagem a ser clareada ou escurecida. 


Manter pressionada a tecla Alt (Windows) ou Option (Macintosh) ao arrastar a ferramenta 
para alternar temporariamente entre as ferramenta Clarear e Escurecer. 


Corte de um bitmap selecionado 
É possível isolar um único objeto bitmap em um documento do Fireworks e cortar apenas esse 
objeto, deixando os demais objetos intactos na tela. 
Para cortar uma imagem bitmap sem afetar outros objetos do documento: 


1 Selecionar um objeto bitmap clicando nele na tela ou em sua miniatura no painel Camadas, ou 
desenhar uma moldura de caixa de seleção com uma ferramenta de seleção de bitmap. 


2 Escolher Editar > Cortar bitmap selecionado. 


As alças de corte aparecem ao redor de todo o bitmap selecionado ou ao redor da moldura da 
caixa de seleção, caso tenha sido desenhada na etapa 1. 
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3 Ajustar as alças de corte até que a caixa delimitadora envolva a área da imagem bitmap que 
deseja manter. 


Nota: Para cancelar uma seleção de corte, pressionar Esc. 


Caixa delimitadora 


4 Clicar duas vezes dentro da caixa delimitadora ou pressionar Enter para cortar a seleção. 


Todos os pixels do bitmap selecionado que estiverem fora da caixa delimitadora serão 
removidos, mas os outros objetos do documento permanecerão. 


Ajuste da cor e do tom de um bitmap 


O Fireworks incorpora filtros de ajuste de cor e de tom que melhoram e intensificam as cores nas 
imagens bitmap. É possível ajustar o contraste e o brilho, a faixa tonal, o matiz e a saturação de cor 
das imagens. 


É simples adicionar seus plug-ins favoritos do Photoshop ao Fireworks e aplicá-los a bitmaps usando 
o menu Filtros ou a área Efeitos ao vivo do Inspetor de propriedades. A aplicação de filtros como 
Efeitos ao vivo no Inspetor de propriedades é um processo não-destrutivo. Os Efeitos ao vivo não 
alteram permanentemente os pixels; é possível removê-los ou editá-los a qualquer momento. 


A aplicação de um filtro a um objeto vetorial selecionado usando o menu Filtros converte a 
seleção em um bitmap. 


Se preferir aplicar filtros de uma forma permanente e irreversível, o menu Filtros é o local certo 
para fazer a sua escolha. No entanto, é recomendável usar filtros como Efeitos ao vivo sempre que 
possível. Para mais informações sobre como adicionar plug-ins do Photoshop, consultar 
“Aplicações de filtros e plug-ins do Photoshop como Efeitos ao vivo” na página 217. 


Os filtros do menu Filtros podem ser aplicados a seleções de pixels, já os Efeitos ao vivo não 
podem. No entanto, é possível definir uma área de um bitmap, criar um bitmap separado a partir 
dela e, depois, aplicar um Efeito ao vivo a ele. 

Para aplicar um Efeito ao vivo a uma área definida por uma moldura de caixa de seleção de bitmap: 


1 Escolher uma ferramenta de seleção de bitmap e desenhar uma moldura de caixa de seleção. 


2 Escolher Editar > Recortar. 
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3 Escolher Editar > Colar. 


A seleção é colada no mesmo lugar em que estavam os pixels originais, mas agora ela é um 
objeto bitmap separado. 


4 Clicar na miniatura do novo objeto bitmap no painel Camadas para selecionar o objeto bitmap. 
5 Aplicar um Efeito ao vivo no Inspetor de propriedades. 


O Efeito ao vivo é aplicado somente ao novo objeto bitmap, simulando a aplicação de um filtro 
a uma seleção de pixels. 


Nota: Embora os Efeitos ao vivo sejam mais flexíveis, um grande número deles em um documento pode resultar 
em uma queda no desempenho do Fireworks. Para mais informações, consultar “Controle de redesenho do 
documento” na página 98. 


Ajuste da faixa tonal 


Os recursos Níveis e Curvas são úteis para ajustar a faixa tonal de um bitmap. Níveis corrige 
bitmaps que contêm uma alta concentração de pixels nos realces, meios-tons ou sombras. O 
recurso Níveis automáticos permite que o Fireworks ajuste a faixa tonal automaticamente. O 
recurso Curvas confere um controle mais preciso sobre a faixa tonal de um bitmap, pois permite 
ajustar qualquer cor da faixa sem afetar outras cores. 


Uso do recurso Níveis 


Um bitmap com uma faixa tonal completa deve ter um número par de pixels em todas as áreas. O 
recurso Níveis corrige bitmaps com alta concentração de pixels em realces, meios-tons ou sombras. 


Realces é aplicado quando uma alta concentração de pixels claros parece desbotada. 
Meios-tons é aplicado quando muitos pixels em meios-tons parecem suaves. 


Sombras é aplicado quando uma área de pixels excessivamente escuros oculta grande parte dos 


detalhes. 


O recurso Níveis define os pixels mais escuros e os mais claros como preto e branco, e redistribui 
os meios-tons proporcionalmente. Isso produz uma imagem com os detalhes mais aguçados em 
todos os seus pixels. 


Original com pixels concentrados nos realces; imagem após o ajuste com o recurso Níveis 


134 Capítulo 5 


O Histograma na caixa de diálogo Níveis exibe a distribuição de pixels de um bitmap. O 
Histograma é uma ilustração gráfica da distribuição de pixels em realces, meios-tons e sombras de 
um bitmap. 


O Histograma ajuda a determinar o melhor método de corrigir a faixa tonal de uma imagem. 
Uma alta concentração de pixels nos realces ou sombras indica que a imagem poderia ser 
melhorada com os recursos Níveis ou Curvas. 


O eixo horizontal ilustra os valores das cores, da mais escura (0) até a mais clara (255). A leitura 
do eixo horizontal deve ser feita da esquerda para a direita: a esquerda representa os pixels mais 
escuros, o centro, os pixels em meios-tons e a direita, os pixels mais claros. 


O eixo vertical representa o número de pixels em cada nível de brilho. Normalmente, a primeira 
operação é ajustar os realces e sombras. Ajustar os tons médios em segundo lugar permite 
melhorar o valor do brilho sem afetar os realces e sombras. 

Para ajustar realces, meios-tons e sombras: 

1 Selecionar a imagem bitmap. 

2 Seguir um destes procedimentos para abrir a caixa de diálogo Níveis: 


e No Inspetor de propriedades, clicar no botão Adiciona efeitos e escolher Ajustar cor > 
Níveis no menu pop-up Adiciona efeitos. 


è Escolher Filtros > Ajustar cor > Níveis. 


Nota: A aplicação de um filtro a partir do menu Filtros é uma operação destrutiva; ou seja, não é possível 
desfazê-la, exceto quando Editar > Desfazer for uma opção. Para manter a capacidade de ajustar, desativar ou 
remover esse filtro, é melhor aplicá-lo como um Efeito ao vivo, conforme descrito na primeira opção com 
marcador desta etapa. Para mais informações, consultar “Uso de Efeitos ao vivo” na página 213. 


Níveis 


PAI 


Visualização 


Níveis de entrada: |0 [1 255 | 


Ao As 


Níveis de saída: O 


Caixa de diálogo Níveis 
Dica: Para exibir as alterações no espaço de trabalho, escolher Visualizar na caixa de diálogo. À medida que são 
feitas alterações, a imagem é atualizada automaticamente. 


3 No menu pop-up Canal, escolher se deseja aplicar alterações a canais de cores individuais 
(vermelho, azul ou verde) ou a todos os canais de cores (RGB). 
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4 Arrastar os controles deslizantes Níveis de entrada abaixo do Histograma para ajustar os realces, 
meios-tons e sombras: 


e O controle deslizante da direita ajusta os realces usando valores de 255 to 0. 
e O controle deslizante do centro ajusta os meios-tons usando valores de 10 a 0. 
e O controle deslizante da esquerda ajusta as sombras usando valores de 0 a 255. 


À medida que o usuário move os controles deslizantes, os valores são inseridos 
automaticamente nas caixas Níveis de entrada. 


Nota: O valor de sombra não pode ser mais alto do que o valor de realce; o valor de realce não pode ser mais 
baixo do que o valor de sombra; e os meios-tons devem estar entre as configurações de sombra e realce. 


5 Arrastar os controles deslizantes Níveis de saída para ajustar os valores de contraste na imagem: 
e O controle deslizante da direita ajusta os realces usando valores de 255 to 0. 
* O controle deslizante da esquerda ajusta as sombras usando valores de 0 a 255. 


À medida que o usuário move os controles deslizantes, os valores são inseridos 
automaticamente nas caixas Níveis de saída. 


Uso do recurso Níveis automáticos 


O recurso Níveis automáticos permite que o Fireworks ajuste a faixa tonal automaticamente. 


Para ajustar realces, meios-tons e sombras automaticamente: 
1 Selecionar a imagem. 
2 Seguir um destes procedimentos para escolher Níveis automáticos: 


* No Inspetor de propriedades, clicar no botão Adiciona efeitos e escolher Ajustar cor > 
Níveis automáticos no menu pop-up Adiciona efeitos. 


è Escolher Filtros > Ajustar cor > Níveis automáticos. 


Nota: A aplicação de um filtro a partir do menu Filtros é uma operação destrutiva; ou seja, não é possível 
desfazê-la, exceto quando Editar > Desfazer for uma opção. Para manter a capacidade de ajustar, desativar ou 
remover esse filtro, é melhor aplicá-lo como um Efeito ao vivo, conforme descrito na primeira opção com 
marcador desta etapa. Para mais informações, consultar “Uso de Efeitos ao vivo” na página 213. 


Dica: Existe também a possibilidade de ajustar os realces, meios-tons e sombras automaticamente clicando no 
botão Automático na caixa de diálogo Níveis ou Curvas. 


Uso do recurso Curvas 


O recurso Curvas é semelhante ao Níveis, mas oferece controle mais preciso sobre a faixa tonal. 
Enquanto Níveis usa realces, sombras e meios-tons para corrigir a faixa tonal, Curvas permite 
ajustar qualquer cor na faixa tonal, em vez de ajustar apenas três variáveis, sem afetar outras cores. 
Uma das aplicações do recurso Curvas é, por exemplo, para corrigir um matiz de cor causado por 
condições de iluminação. 


A grade na caixa de diálogo Curvas ilustra dois valores de brilho: 
O eixo horizontal ilustra o brilho original dos pixels, mostrado nacaixa Entrada. 


O eixo vertical representa os novos valores de brilho, mostrados na caixa Saída. 
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Quando a caixa de diálogo Curvas é aberta pela primeira vez, a linha diagonal indica que não 
foram feitas alterações, de modo que os valores de entrada e de saída são os mesmos para todos os 
pixels. 

Para ajustar um ponto específico na faixa tonal: 

1 Selecionar a imagem. 

2 Seguir um destes procedimentos para abrir a caixa de diálogo Curvas: 


e No Inspetor de propriedades, clicar no botão Adiciona efeitos e escolher Ajustar cor > 
Curvas no menu pop-up Adiciona efeitos. 


è Escolher Filtros > Ajustar cor > Curvas. 


Nota: A aplicação de um filtro a partir do menu Filtros é uma operação destrutiva; ou seja, não é possível 
desfazê-la, exceto quando Editar » Desfazer for uma opção. Para manter a capacidade de ajustar, desativar ou 
remover esse filtro, é melhor aplicá-lo como um Efeito ao vivo, conforme descrito na primeira opção com 
marcador desta etapa. Para mais informações, consultar “Uso de Efeitos ao vivo” na página 218. 


Canal: [RGB ~] 


| pá [Z] Visualização 


Entrada: | 0 
Saída: 0 


Caixa de diálogo Curvas 


3 No menu pop-up Canal, escolher se deseja aplicar alterações a canais de cores individuais ou a 
todas as cores. 


4 Clicar em um ponto na linha diagonal da grade e arrastá-lo até a nova posição para ajustar a 
curva. 


e Cada ponto na curva tem seus próprios valores de entrada e saída. Quando se arrasta um 
ponto, os valores de entrada e saída são atualizados automaticamente. 
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e A curva exibe valores de brilho de O a 255, com O representando as sombras. 


Curva após arrastar um ponto para ajustar 


Dica: Também é possível ajustar os realces, meios-tons e sombras automaticamente clicando no botão 
Automático na caixa de diálogo Curvas. 


Para excluir um ponto ao longo da curva: 
Arrastar o ponto para fora da grade. 


Nota: Não é possível excluir os pontos finais da curva. 


Uso de um conta-gotas tonal 

A caixa de diálogo Níveis ou Curvas oferece o conta-gotas de realce, sombra ou meio-tom, que 
ajusta realces, sombras e meios-tons. 

Para ajustar o equilíbrio tonal manualmente com os contas-gotas tonais: 

1 Abrir a caixa de diálogo Níveis ou Curvas e escolher um canal de cor no menu pop-up Canal. 

2 Escolher o conta-gotas apropriado para redefinir os valores tonais na imagem: 

e Clicar no pixel mais claro na imagem com o conta-gotas Realce para redefinir o valor de realce. 


[2] 
>] e Clicar no pixel de cor neutra na imagem com o conta-gotas Meio-tom para redefinir o valor de 
meio-tom. 


| * Clicar no pixel mais escuro na imagem com o conta-gotas Sombra para redefinir o valor de 
sombra. 


3 Clicar em OK. 
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Ajuste de brilho e contraste 


O recurso Brilho/Contraste modifica o contraste ou o brilho dos pixels em uma imagem. Isso 
afeta os realces, sombras e meios-tons de uma imagem. A aplicação mais comum do recurso 
Brilho/Contraste é para corrigir imagens muito escuras ou muito claras. 


Original; após o ajuste do brilho 


Para ajustar o brilho ou contraste: 
1 Selecionar a imagem. 
2 Seguir um destes procedimentos para abrir a caixa de diálogo Brilho/Contraste: 


* No Inspetor de propriedades, clicar no botão Adiciona efeitos e escolher Ajustar cor > Brilho/ 
Contraste no menu pop-up Adiciona efeitos. 


* Escolher Filtros > Ajustar cor > Brilho/Contraste. 


Nota: A aplicação de um filtro a partir do menu Filtros é uma operação destrutiva; ou seja, não é possível 
desfazê-la, exceto quando Editar > Desfazer for uma opção. Para manter a capacidade de ajustar, desativar ou 
remover esse filtro, é melhor aplicá-lo como um Efeito ao vivo, conforme descrito na primeira opção com 
marcador desta etapa. Para mais informações, consultar “Uso de Efeitos ao vivo” na página 213. 


3 Arrastar os controles deslizantes Brilho e Contraste para ajustar as configurações. 
Os valores variam de -100 a 100. 
4 Clicar em OK. 


Aplicação do efeito ao vivo Preenchimento colorido 


O Efeito ao vivo Preenchimento colorido altera rapidamente a cor de objetos, seja substituindo 
totalmente os pixels por uma cor específica ou misturando uma cor em um objeto existente. A 
mistura de cores adiciona a cor no topo do objeto. Misturar uma cor em um objeto existente 
funciona de forma semelhante ao filtro Matiz/Saturação; entretanto, permite aplicar rapidamente 
uma cor específica de um painel de amostragem de cores. 


Para adicionar um efeito Preenchimento colorido a um objeto selecionado: 


1 No Inspetor de propriedades, clicar no botão Adiciona efeitos e escolher Ajustar cor > 
Preenchimento colorido no menu pop-up Adiciona efeitos. 
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2 


3 
4 


Escolher um modo de mistura. 


O modo padrão é Normal. Para informações sobre cada modo de mistura, consultar “Sobre 
modos de mistura” na página 245. 


Escolher uma cor de preenchimento no menu pop-up da caixa de cor. 


Escolher uma porcentagem de opacidade para a cor de preenchimento e pressionar Enter. 


Ajuste de matiz e saturação 


O recurso Matiz/Saturação ajusta o tom de uma cor, seu matiz; a intensidade de uma cor, sua 
saturação; ou a luminosidade de uma cor em uma imagem. 


Original; após o ajuste da saturação 


Para ajustar o matiz ou saturação: 


1 
2 


Selecionar a imagem. 
Seguir um destes procedimentos para abrir a caixa de diálogo Matiz/Saturação: 


No Inspetor de propriedades, clicar no botão Adiciona efeitos e escolher Ajustar cor > Matiz/ 
Saturação no menu pop-up Adiciona efeitos. 


Escolher Filtros > Ajustar cor > Matiz/Saturação. 

Nota: A aplicação de um filtro a partir do menu Filtros é uma operação destrutiva; ou seja, não é possível 
desfazê-la, exceto quando Editar > Desfazer for uma opção. Para manter a capacidade de ajustar, desativar ou 
remover esse filtro, é melhor aplicá-lo como um Efeito ao vivo, conforme descrito na primeira opção com 
marcador desta etapa. Para mais informações, consultar “Uso de Efeitos ao vivo” na página 213. 

Arrastar o controle deslizante Matiz para ajustar a cor da imagem. 

Os valores variam de -180 a 180. 

Arrastar o controle deslizante Saturação para ajustar a pureza das cores. 

Os valores variam de -100 a 100. 

Arrastar o controle deslizante Luminosidade para ajustar a luminosidade das cores. 


Os valores variam de -100 a 100. 
Clicar em OK. 
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Para alterar uma imagem RGB para uma imagem de dois tons ou adicionar cor a uma imagem em 
tons de cinza: 


Escolher Colorir na caixa de diálogo Matiz/Saturação. 
Nota: A escolha de Colorir altera a faixa de valores dos controles deslizantes Matiz e Saturação. O matiz varia de O 


a 360. A saturação varia de O a 100. 


Inversão de um valor de cor de uma imagem 


O filtro Inverter altera cada cor em uma imagem para seu inverso na roda de cores. Por exemplo, 
aplicar o filtro a um objeto vermelho (R=255, G=0, B=0) altera a cor para azul claro (R=, G=55, 
B=255). 


Uma imagem colorida; a imagem invertida 


Para inverter cores: 
1 Selecionar a imagem. 
2 Seguir um destes procedimentos: 


e No Inspetor de propriedades, clicar no botão Adiciona efeitos e escolher Ajustar cor > 
Inverter no menu pop-up Adiciona efeitos. 
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è Escolher Filtros > Ajustar cor > Inverter. 


Nota: A aplicação de um filtro a partir do menu Filtros é uma operação destrutiva; ou seja, não é possível 
desfazê-la, exceto quando Editar » Desfazer for uma opção. Para manter a capacidade de ajustar, desativar ou 
remover esse filtro, é melhor aplicá-lo como um Efeito ao vivo, conforme descrito na primeira opção com 
marcador desta etapa. Para mais informações, consultar “Uso de Efeitos ao vivo” na página 218. 


Embaçamento e aguçamento de um bitmap 
O Fireworks dispõe de um conjunto de opções de embaçamento e aguçamento que o usuário 
pode aplicar como Efeitos ao vivo ou filtros permanentes irreversíveis. 

Embaçamento de uma imagem 


O embaçamento suaviza a aparência de uma imagem bitmap. O Fireworks possui três opções de 
embaçamento: 


Embaçar suaviza o foco de pixels selecionados. 


Embaçamento maior embaça aproximadamente três vezes mais que Embaçar. 


Desfoque Gaussiano aplica uma média ponderada de embaçamento a cada pixel para produzir 
um efeito de neblina. 


Antes e depois de usar Desfoque Gaussiano 


Para embaçar uma imagem: 
1 Selecionar a imagem. 
2 Seguir um destes procedimentos: 


e No Inspetor de propriedades, clicar no botão Adiciona efeitos e escolher Embaçar > Embaçar 
ou Embaçamento maior no menu pop-up Adiciona efeitos. 


* Escolher Filtros > Embaçar > Embaçar ou Embaçamento maior. 


Nota: A aplicação de um filtro a partir do menu Filtros é uma operação destrutiva; ou seja, não é possível 
desfazê-la, exceto quando Editar » Desfazer for uma opção. Para manter a capacidade de ajustar, desativar ou 
remover esse filtro, é melhor aplicá-lo como um Efeito ao vivo, conforme descrito na primeira opção com 
marcador desta etapa. Para mais informações, consultar “Uso de Efeitos ao vivo” na página 213. 
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Para embaçar uma imagem usando Desfoque Gaussiano: 
1 Selecionar a imagem. 
2 Seguir um destes procedimentos para abrir a caixa de diálogo Desfoque Gaussiano: 


e No Inspetor de propriedades, clicar no botão Adiciona efeitos e escolher Embaçar > Desfoque 
Gaussiano no menu pop-up Adiciona efeitos. 


* Escolher Filtros > Embaçar > Desfoque Gaussiano. 


Nota: A aplicação de um filtro a partir do menu Filtros é uma operação destrutiva; ou seja, não é possível 
desfazê-la, exceto quando Editar » Desfazer for uma opção. Para manter a capacidade de ajustar, desativar ou 
remover esse filtro, é melhor aplicá-lo como um Efeito ao vivo, conforme descrito na primeira opção com 
marcador desta etapa. Para mais informações, consultar “Uso de Efeitos ao vivo” na página 218. 


3 Arrastar o controle deslizante Raio de desfoque para definir a intensidade do efeito de 
embaçamento. 


Os valores variam de 0,1 a 250. Um aumento no raio resulta em um efeito de embaçamento 
mais forte. 


4 Clicar em OK. 


Uso do efeito Localizar bordas para criar uma aparência de esboço 


O efeito Localizar bordas identifica as transições de cores nas imagens e as transforma em linhas 
para dar aos bitmaps a aparência de desenhos de linhas. 


Original; após a aplicação de Localizar bordas 


Para aplicar o efeito Localizar bordas a uma área selecionada, seguir um destes procedimentos: 


e No Inspetor de propriedades, clicar no botão Adiciona efeitos e escolher Outro > Localizar 
bordas no menu pop-up Adiciona efeitos. 


è Escolher Filtros > Outro > Localizar bordas. 


Nota: A aplicação de um filtro a partir do menu Filtros é uma operação destrutiva; ou seja, não é possível 
desfazê-la, exceto quando Editar » Desfazer for uma opção. Para manter a capacidade de ajustar, desativar ou 
remover esse filtro, é melhor aplicá-lo como um Efeito ao vivo, conforme descrito na primeira opção com 
marcador desta etapa. Para mais informações, consultar “Uso de Efeitos ao vivo” na página 218. 
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Conversão de uma imagem em uma transparência 
O efeito Converter em Alfa converte um objeto ou texto em uma transparência com base na 
transparência da imagem. 
Para aplicar o efeito Converter em Alfa a uma área selecionada, seguir um destes procedimentos: 


e No Inspetor de propriedades, clicar no botão Adiciona efeitos e escolher Outro > 
Converter em Alfa no menu pop-up Adiciona efeitos. 

è Escolher Filtros > Outro > Converter em Alfa. 
Nota: A aplicação de um filtro a partir do menu Filtros é uma operação destrutiva; ou seja, não é possível 
desfazê-la, exceto quando Editar > Desfazer for uma opção. Para manter a capacidade de ajustar, desativar ou 


remover esse filtro, é melhor aplicá-lo como um Efeito ao vivo, conforme descrito na primeira opção com 
marcador desta etapa. Para mais informações, consultar “Uso de Efeitos ao vivo” na página 218. 


Uso do recurso Aguçar para aguçar uma imagem 
O recurso Aguçar corrige imagens embaçadas. O Fireworks possui três opções de aguçamento: 
Aguçar ajusta o foco de uma imagem embaçada aumentando o contraste dos pixels adjacentes. 


Aguçamento maior aumenta o contraste dos pixels adjacentes aproximadamente três vezes mais 
que Aguçar. 


Desfocar máscara aguça uma imagem ajustando o contraste das bordas dos pixels. Esta opção 
oferece o maior controle, portanto, normalmente é a melhor opção para aguçar uma imagem. 


Original; após o aguçamento 


Para aguçar uma imagem usando uma opção de aguçamento: 
1 Selecionar a imagem. 
2 Seguir um destes procedimentos para escolher uma opção de aguçamento: 


e No Inspetor de propriedades, clicar no botão Adiciona efeitos e escolher Aguçar > 
Aguçar ou Aguçamento maior no menu pop-up Adiciona efeitos. 


* Escolher Filtros > Aguçar > Aguçar ou Aguçamento maior. 


Nota: A aplicação de um filtro a partir do menu Filtros é uma operação destrutiva; ou seja, não é possível 
desfazê-la, exceto quando Editar » Desfazer for uma opção. Para manter a capacidade de ajustar, desativar ou 
remover esse filtro, é melhor aplicá-lo como um Efeito ao vivo, conforme descrito na primeira opção com 
marcador desta etapa. Para mais informações, consultar “Uso de Efeitos ao vivo” na página 213. 
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Para aguçar uma imagem usando Desfocar máscara: 


1 
2 


Selecionar a imagem. 
Seguir um destes procedimentos para abrir a caixa de diálogo Desfocar máscara: 


No Inspetor de propriedades, clicar no botão Adiciona efeitos e escolher Aguçar > 
Desfocar máscara no menu pop-up Adiciona efeitos. 


Escolher Filtros > Aguçar > Desfocar máscara. 


Nota: A aplicação de um filtro a partir do menu Filtros é uma operação destrutiva; ou seja, não é possível 
desfazê-la, exceto quando Editar > Desfazer for uma opção. Para manter a capacidade de ajustar, desativar ou 
remover esse filtro, é melhor aplicá-lo como um Efeito ao vivo, conforme descrito na primeira opção com 
marcador desta etapa. Para mais informações, consultar “Uso de Efeitos ao vivo” na página 213. 


Arrastar o controle deslizante Grau de desfoque para selecionar o grau de efeito de aguçamento 
de 1 a 500 por cento. 


Arrastar o controle deslizante Raio do pixel para selecionar um raio de 0,1 a 250. 


Um aumento no raio resulta em uma área maior de contraste nítido em torno de cada borda de 


pixel. 
Arrastar o controle deslizante Limiar para selecionar um limiar de 0 a 255. 


Valores entre 2 e 25 são os mais usados. Um aumento no limiar aguça somente os pixels com 
contraste maior na imagem. Uma diminuição no limiar inclui pixels de menor contraste. Um 
limiar de 0 aguça todos os pixels na imagem. 


Clicar em OK. 
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CAPÍTULO 6 
Como trabalhar com objetos vetoriais 


Um objeto vetorial é uma imagem gráfica de computador cuja forma é definida por um traçado. A 
forma de um traçado vetorial é determinada por pontos plotados ao longo do caminho. Uma cor 
de traço do objeto vetorial segue o traçado. Seu preenchimento ocupa a área interna do traçado. 
Em geral, o traço e o preenchimento determinam a forma como o gráfico aparecerá quando for 
impresso ou publicado na Web. 


O Macromedia Fireworks MX possui várias ferramentas para desenhar e editar objetos vetoriais 
que usam diversas técnicas. Com as ferramentas de forma básica, é possível desenhar rapidamente 
linhas retas, círculos e elipses, quadrados e retângulos, estrelas e qualquer polígono eqüilateral de 3 


a 360 lados. 


Pode-se desenhar traçados vetoriais livres com as ferramentas Caneta e Traçado vetorial. A 
ferramenta Caneta permite desenhar formas complexas com curvas suaves e linhas retas, plotando 
pontos um a um. 


Depois de desenhar objetos vetoriais, o Fireworks lhe oferece vários métodos para editá-los. É 

possível alterar a forma de um objeto movendo, adicionando ou excluindo pontos. Além disso, é 
possível usar alças de ponto para alterar a forma dos segmentos de traçado adjacentes. Ferramentas 
de forma livre permitem a alteração na forma dos objetos por meio da edição direta dos traçados. 


A opção Comandos do menu Modificar lhe oferece mais opções para editar objetos, inclusive 
combinando objetos para criar um único objeto, criando um objeto da partir do ponto de 
interseção de vários objetos e expandindo o traço de um objeto. Além disso, o usuário pode 
importar imagens e manipulá-las usando esses comandos. 


Desenho de objeto vetorial 


O Fireworks possui várias ferramentas para desenhar objetos vetoriais. Com elas é possível 
desenhar formas básicas, traçados livres e formas complexas plotando pontos um a um. 


Desenho de formas básicas 


Quadrados, retângulos, círculos, ovais, estrelas e outros polígonos são facilmente desenhados com 
as ferramentas de forma básica. É possível desenhar retângulos com formas arredondadas e ajustar 
o raio do canto depois de desenhá-lo. Além disso, pode-se desenhar uma variedade de estrelas, de 
estreitas e pontudas a largas e atarracadas. 
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As ferramentas de desenho de forma básica estão na seção Vetor do painel Ferramentas. Quando 
usar qualquer ferramenta de desenho ou pintura para criar um objeto, a ferramenta aplicará os 
atributos atuais de traço e preenchimento ao objeto. Para alterar os atributos atuais de traço e 
preenchimento, bem como os atributos de traço e preenchimento de objetos existentes, consultar 
Capítulo 8, “Aplicação de cor, traço e preenchimento”, na página 189. 


ojojolo 


Ferramentas de forma básica 


Desenho de linhas, retângulos e elipses 


É possível usar a ferramenta Linha, Retângulo ou Elipse para desenhar rapidamente formas 
básicas. A ferramenta Retângulo desenha retângulos como objetos agrupados. Para mover um 
ponto de canto de um retângulo de forma independente, é necessário desagrupar o retângulo ou 
usar a ferramenta Selecionar secundário. Para desenhar retângulos com cantos arredondados, 
consultar “Desenho de retângulos com cantos arredondados” na página 149. 


Para desenhar linha, retângulo ou elipse: 


1 Selecionar a ferramenta Linha, Retângulo ou Elipse. 


2 Se desejar, definir os atributos de traço e preenchimento no Inspetor de propriedades. 
Consultar Capítulo 8, “Aplicação de cor, traço e preenchimento”, na página 189. 


3 Arrastar na tela para desenhar a forma. 
Para a ferramenta Linha, arrastar com a tecla Shift para limitar linhas a incrementos de 45 graus. 
Para a ferramenta Retângulo ou Elipse, arrastar com a tecla Shift para limitar as formas a 
quadrados ou círculos. 

Para desenhar linha, retângulo ou elipse a partir de um ponto central específico: 

Posicionar o ponteiro no ponto central pretendido e arrastar com a tecla Alt (Windows) ou com 

Option (Macintosh) a ferramenta de desenho. 

Para limitar uma forma e desenhar a partir do ponto central: 

Posicionar o ponteiro no ponto central pretendido e arrastar a ferramenta de desenho com as 

teclas Shift+Alt (Windows) ou com Shift+Option (Macintosh). 

Para ajustar a posição de uma forma básica durante o desenho: 


Enquanto pressionar o botão do mouse, pressionar e manter a barra de espaços pressionada, 
depois arrastar o objeto para um outro local da tela. Soltar a barra de espaços para continuar a 
desenhar o objeto. 


Nota: A ferramenta Linha é uma exceção. Se pressionar a barra de espaços enquanto estiver usando a ferramenta 
Linha, a posição de uma linha não será alterada na tela. 


Para redimensionar linha, retângulo ou elipse, seguir um destes procedimentos: 


e Digitar novos valores de largura (L) ou altura (A) no Inspetor de propriedades ou no painel 
Informações. 
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* Selecionar a ferramenta Dimensionar na seção Selecionar do painel Ferramentas e arrastar a 
alça de transformação de canto. Isso redimensiona o objeto proporcionalmente. 


Nota: Também é possível redimensionar um objeto proporcionalmente ao selecionar Modificar > Transformar > 
Dimensionar e arrastar a alça de transformação de canto, ou selecionar Modificar > Transformar > Transformação 
numérica e digitar novas dimensões. Para mais informações sobre como redimensionar ou dimensionar objetos, 
consultar “Transformação e distorção de objetos selecionados e seleções” na página 118. 


e Arrastar o ponto de canto de um retângulo. 


Nota: O dimensionamento de um objeto vetorial não altera a largura do traço. 


Desenho de retângulos com cantos arredondados 


É possível desenhar retângulos com cantos arredondados usando a ferramenta Retângulo 
arredondado ou usando a opção Arredondamento no Inspetor de propriedades, para ajustar o 
arredondamento de cantos de retângulos selecionados. A ferramenta Retângulo arredondado 
desenha retângulos como objetos agrupados. Para mover pontos de retângulo arredondado 
livremente, é necessário desagrupar o retângulo ou usar a ferramenta Selecionar secundário. 


Para desenhar um retângulo com cantos arredondados: 


1 Selecionar a ferramenta Retângulo arredondado, localizada no menu pop-up da ferramenta 
Retângulo. 


2 Arrastar o mouse na tela para desenhar o retângulo. 


Dica: É possível ajustar o arredondamento do canto enquanto se desenha pressionando qualquer uma das 
teclas de seta ou as teclas numéricas 1 ou 2 várias vezes. 


Para arredondar os cantos de um retângulo selecionado: 


Inserir um valor entre O e 100 na caixa Arredondamento no Inspetor de propriedades e pressionar 
Enter, ou arrastar o controle deslizante pop-up. 


PÁ 7) [o] | Nenhum s 


Borda: | 


Arredond. do retângulo: [20 <J 


Nota: Se o Inspetor de propriedades estiver a meia altura, clicar na seta expansora no canto direito inferior para 
expandi-lo na altura total. 


Desenho de polígonos 


Com a ferramenta Polígono, é possível desenhar qualquer polígono eqüilateral, desde um 
triângulo a um polígono com 360 lados. 
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Para desenhar um polígono: 


[5 1 


Selecionar a ferramenta Polígono, uma das ferramentas básicas de desenho de forma, na seção 
Vetor do painel Ferramentas. 


No Inspetor de propriedades, seguir um destes procedimentos para especificar o número de lados 
do polígono: 


Usar o controle deslizante para escolher de 3 a 25 lados. 


Digitar um número de 3 a 360 na caixa de texto Lados. 


Arrastar o mouse para desenhar o polígono. 


Para limitar a orientação de um polígono a incrementos de 45 graus, manter a tecla Shift 
pressionada enquanto desenha. A ferramenta Polígono sempre desenha a partir de um ponto 
central. 


Desenho de estrelas 


Com a opção Estrela da ferramenta Polígono, é possível desenhar estrelas com 3 até 360 pontas e 
todos os ângulos da faixa de pontas. 


Para desenhar uma estrela: 


1 
2 


Selecionar a ferramenta Polígono. 


No Inspetor de propriedades, selecionar Estrela no menu pop-up Forma. 


Forma: | Estrela há 


Digitar o número de pontas da estrela na caixa de texto Lados. 


Selecionar Automática ou digitar um valor na caixa de texto Ângulo. Valores próximos de O 
resultam em pontos longos e finos; valores próximos de 100 resultam em pontos curtos e 
robustos. 


Êngulo:/38 |% [V] Automática 


Arrastar o mouse na tela para desenhar a estrela. 


Para limitar a orientação de uma estrela a incrementos de 45 graus, manter a tecla Shift 
pressionada durante o arraste. A ferramenta Polígono sempre desenha a partir de um ponto 
central. 
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Desenho de traçados de forma livre 


É possível desenhar traçados vetoriais de forma livre com a ferramenta Traçado vetorial 
praticamente da mesma forma quando desenha com um marcador de ponta porosa ou crayon. 


Vetor 
“ER 
T A” ¢ Ferramenta Caneta (P) 


A < Ferramenta Traçado vetorial (P) K 


194 Ferramenta Redesenhar traçado {P} 


Ferramenta Traçado vetorial, localizada no menu pop-up da ferramenta Caneta 


É possível alterar os atributos de traço e preenchimento de traçados desenhados com a ferramenta 
Traçado vetorial. Consultar Capítulo 8, “Aplicação de cor, traço e preenchimento”, na página 189. 


Uso da ferramenta Traçado vetorial 


A ferramenta Traçado vetorial possui uma grande variedade de categorias de traços de pincel, 
inclusive aerógrafo, caligrafia, carvão, crayon e artificial. Em geral, cada categoria possui uma 
opção de traços, como pontas porosas, claras e escuras, óleo borrifado, bambu, fita, confete, 3D, 
pasta de dente e pintura viscosa. 


Embora os traços sejam parecidos com a pintura ou tinta, cada um possui pontos e traçados de 
um objeto vetorial. Isso significa que é possível alterar a forma do traço, usando qualquer uma das 
diversas técnicas de edição vetorial. Depois de mudar a forma do traçado, o traço é redesenhado. 


Pintura editada pela movimentação de pontos vetoriais 


É possível modificar traços de pincel e adicionar preenchimentos a objetos selecionados 
desenhados com a ferramenta Traçado vetorial. As novas configurações de traço e preenchimento 
são retidas para uso futuro da ferramenta Traçado vetorial dentro do documento atual. 

Para desenhar um traçado vetorial de forma livre: 


1 Selecionar a ferramenta Traçado vetorial, localizada no menu pop-up da ferramenta Caneta. 
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2 Se desejar, definir os atributos de traço e preenchimento no Inspetor de propriedades. 
Consultar Capítulo 8, “Aplicação de cor, traço e preenchimento”, na página 189. 


3 Arrastar o mouse para desenhar. Para limitar o traçado a uma linha horizontal ou vertical, 
manter a tecla Shift pressionada durante o arraste. 


4 Soltar o botão do mouse para terminar o traçado. Para fechar o traçado, soltar o botão do 
mouse quando tiver retornado o ponteiro ao ponto inicial do traçado. 


Desenho de um traçado através da plotagem de pontos 


Uma forma para desenhar e editar objetos vetoriais no Fireworks é plotar pontos como se estivesse 
desenhando uma figura conectada por pontos. Quando clicar em cada ponto com a ferramenta 
Caneta, o traçado do objeto vetorial é automaticamente desenhado desde o último ponto clicado 
até o próximo. 


Além de conectar os pontos só com segmentos retos, a ferramenta Caneta pode desenhar 
segmentos curvos suaves, derivados matematicamente, conhecidos como curvas Bézier. Cada tipo 
de ponto — ponto de canto ou ponto de curva — determina se as curvas adjacentes representam 
linhas retas ou curvas. 


Ferramenta Caneta 


É possível modificar segmentos de traçado reto e curvo arrastando os pontos. Além disso, pode-se 
modificar segmentos de traçado curvo arrastando as alças de ponto. É possível, inclusive, 
converter segmentos de traçado reto em curvo (e vice-versa) pela conversão dos pontos. 


Desenho de um segmento de traçado reto 


Desenhar segmentos de linha reta com a ferramenta Caneta é só uma questão de clicar para 
colocar os pontos. Cada clique com a ferramenta Caneta plota um ponto de canto. 


Para desenhar um traçado com segmentos de linha reta: 


1 Selecionar a ferramenta Caneta. 
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2 Se desejar, selecionar Editar > Preferências e ativar uma das opções a seguir na guia Edição da 
caixa de diálogo Preferências e depois clicar em OK: 


e Mostrar visualização da caneta visualiza o segmento da linha que resultaria do próximo clique. 
* Mostrar pontos sólidos mostra os pontos sólidos durante o desenho. 

Nota: No Mac OS X, selecionar Fireworks > Preferências, para abrir a caixa de diálogo Preferências. 
3 Clicar na tela para substituir o primeiro ponto de canto. 


4 Mover o ponteiro e clicar para colocar o próximo ponto. Um segmento de linha reta une os dois 
pontos. 


5 Continuar plotando pontos. Os segmentos retos unem intervalos entre pontos. 
6 Seguir um destes procedimentos para finalizar o traçado, aberto ou fechado: 

e Clicar duas vezes no último ponto para terminar o traçado como aberto. 

* Escolher uma outra ferramenta para terminá-lo como um traçado aberto. 


Nota: Quando selecionar qualquer ferramenta Seleção ou ferramenta Vetor além da ferramenta Texto e depois 
retornar à ferramenta Caneta, seu próximo clique continuará com o desenho do objeto. 


e Clicar no primeiro ponto plotado para fechar o traçado. Os pontos inicial e final de um traçado 
fechado são o mesmo ponto. 


Nota: Ciclos formados por uma sobreposição de traçado não são traçados fechados. Apenas traçados iniciados 
e terminados no mesmo ponto são considerados traçados fechados. 


Desenho de um segmento de traçado curvo 


Para desenhar segmentos de traçado curvo, basta clicar e arrastar durante a plotagem dos pontos. 
Durante o desenho, o ponto atual mostra alças. Sejam desenhados com a ferramenta Caneta ou 
com outra ferramenta de desenho do Fireworks, todos os pontos de todos os objetos vetoriais têm 
alças de ponto. No entanto, essas alças apenas são visíveis nos pontos curvos. 


Para desenhar um objeto com segmentos curvos: 
1 Selecionar a ferramenta Caneta. 


2 Clicar para colocar o primeiro ponto de canto. 
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3 Mover o local do próximo ponto e, em seguida, clicar e arrastar para elaborar um ponto de 
curva. Toda vez que clicar e arrastar o mouse, o Fireworks estende o segmento de linha para o 
novo ponto. 


4 Continuar plotando pontos. Se um novo ponto for clicado e arrastado, será elaborado um 
ponto de curva, se for apenas clicado, será produzido um ponto de canto. 


Dica: É possível alternar temporariamente para a ferramenta Selecionar secundário de modo a alterar o local 
dos pontos e a forma das curvas durante o desenho. Pressionar a tecla Control (Windows) ou Command 
(Macintosh) enquanto arrasta um ponto ou uma alça de ponto com a ferramenta Caneta. 

5 Seguir um destes procedimentos para finalizar o traçado, aberto ou fechado: 

e Clicar duas vezes no último ponto para terminar o traçado como aberto. 


* Escolher uma outra ferramenta para terminá-lo como um traçado aberto. Quando selecionar 
algumas ferramentas e depois retornar à ferramenta Caneta, seu próximo clique continuará 
com o desenho do objeto. 


e Clicar no primeiro ponto plotado para fechar o traçado. Os pontos inicial e final de um traçado 
fechado são o mesmo ponto. 


Ajuste da forma de um segmento de traçado reto 

É possível aumentar, diminuir ou alterar a posição de um segmento de traçado reto pela 

movimentação dos pontos. 

Para alterar um segmento de traçado reto: 

1 Selecionar o traçado com a ferramenta Ponteiro ou Selecionar secundário. 

2 Clicar em um ponto com a ferramenta Selecionar secundário para selecioná-lo. 
Pontos de canto selecionados aparecem como quadrados azuis sólidos. 


3 Arrastar o ponto ou usar as teclas de seta para mover o ponto para um novo local. 


Ajuste da forma de um segmento de traçado curvo 


É possível editar a forma de um objeto vetorial arrastando as alças de ponto com a ferramenta 
Selecionar secundário. As alças de ponto determinam o grau de curvatura entre os pontos fixos. 
Essas curvas são conhecidas como curvas Bézier. 


Para editar a curva Bézier de um segmento de traçado: 


1 Selecionar o traçado com a ferramenta Ponteiro ou Selecionar secundário. 
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2 Clicar em um ponto de curva com a ferramenta Selecionar secundário para selecioná-lo. 


Um ponto de curva selecionado aparece como um quadrado azul sólido. As alças de ponto se 
estendem a partir do ponto. 


3 Arrastar as alças para um novo local. Para restringir o movimento da alça a ângulos de 45 graus, 
manter a tecla Shift pressionada durante o arraste. 


A visualização do traçado azul mostra o local em que o novo traçado será desenhado se o botão do 


mouse for solto. 


E— Alças de ponto 
L Ponteiro Selecionar secundário 


Visualiza traçado 


Traçado 
Ponto selecionado 


Por exemplo, se arrastar a alça de ponto esquerda para baixo, a alça de ponto direita irá para 
cima. Para mover a alça de forma independente, arrastá-la pressionando a tecla Alt. 


ELO 


Conversão de segmentos de traçado para reto ou curvo 


Segmentos de traçado reto são intersecionados por pontos de canto. Segmentos de traçado curvo 
contêm pontos de curva. 


UM 
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É possível a conversão de um segmento reto em curvo e vice-versa, por meio da conversão do ponto. 


— 


Para converter um ponto de canto de um traçado selecionado em um ponto de curva: 
1 Selecionar a ferramenta Caneta. 
2 Clicar em um ponto de canto e arrastá-lo para longe dele. 


As alças se estendem, curvando os segmentos adjacentes. 


<= 


Nota: Para editar as alças de ponto, selecionar a ferramenta Selecionar secundário ou pressionar a tecla Control 
(Windows) ou Command (Mac) enquanto a ferramenta Caneta estiver ativa. 


Para converter um ponto de curva de um traçado selecionado em um ponto de canto: 
1 Selecionar a ferramenta Caneta. 


2 Clicar em um ponto curvo. 


E ci 


As alças se retraem e os segmentos adjacentes ficam retos. 


> 


156 Capítulo 6 


Seleção de um ponto 
A ferramenta Selecionar secundário permite a seleção de vários pontos. Antes de selecionar um 
ponto com a ferramenta Selecionar secundário, é necessário selecionar o traçado com a ferramenta 
Ponteiro ou Selecionar secundário, ou clicar na miniatura no painel Camadas. 
Para selecionar pontos específicos em um traçado selecionado: 

[E] 1 Selecionar a ferramenta Selecionar secundário. 
2 Seguir um destes procedimentos: 


e Clicar em um ponto ou manter a tecla Shift pressionada e clicar em vários pontos, um por um. 


è Arrastar em volta dos pontos a serem selecionados. 


Para exibir as alças de um ponto de curva: 


Clicar no ponto com a ferramenta Selecionar secundário. Se qualquer ponto mais perto do ponto 
clicado for um ponto de curva, a alça próxima também será exibida. 


Movimento de um ponto e de uma alça de ponto 

É possível alterar a forma de um objeto arrastando os pontos e as alças de ponto com a ferramenta 
Selecionar secundário. 

Para mover um ponto: 

Arrastar o ponto com a ferramenta Selecionar secundário. 


O traçado é redesenhado para refletir a nova posição do ponto. 


Para alterar a forma de um segmento de traçado: 


Arrastar uma alça de ponto com a ferramenta Selecionar secundário. Arrastar com a tecla Alt 
(Windows) ou com Option (Macintosh) para arrastar uma alça de cada vez. 


Para ajustar a alça de um ponto de curva: 


R] 1 Selecionar a ferramenta Selecionar secundário. 
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2 Selecionar um ponto de canto. 


3 Arrastar com a tecla Alt (Windows) ou com Option (Macintosh) o ponto para exibir sua alça e 
dobrar o segmento adjacente. 


Arraste de uma alça de ponto com a ferramenta Selecionar secundário para editar o segmento 
adjacente de traçado 


Inserção e exclusão de um ponto em um traçado 


É possível adicionar e excluir pontos de um traçado. A adição de pontos a um traçado 

p Ç ç Ç 

proporciona controle sobre um segmento específico dentro do traçado. A exclusão de pontos do 
traçado muda sua forma ou simplifica a edição. 


Para inserir um ponto em um traçado selecionado: 


Com a ferramenta Caneta, clicar em qualquer ponto do traçado que não tenha um ponto. 


Para excluir o ponto de um segmento de traçado selecionado, seguir um destes procedimentos: 
e Clicar em um ponto de canto de um objeto selecionado com a ferramenta Caneta. 
e Clicar duas vezes em um ponto de curva de um objeto selecionado com a ferramenta Caneta. 


* Selecionar um ponto com a ferramenta Selecionar secundário e pressionar a tecla Delete ou 
Backspace. 


Continuação de um traçado existente 


É possível usar a ferramenta Caneta para continuar a desenhar um traçado aberto existente. 
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Para retomar o desenho de um traçado aberto existente: 
1 Selecionar a ferramenta Caneta. 
2 Clicar no ponto final e continuar o traçado. 


O ponteiro da ferramenta Caneta é alterado para indicar a adição de um traçado. 


Mesclagem de dois traçados abertos 

É possível conectar dois traçados abertos para formar um traçado contínuo. Na conexão de dois 
traçados, os atributos de traço, preenchimento e efeito do segundo traçado superior se 
transformam nos atributos do traçado recém-mesclado. 

Para mesclar dois traçados abertos: 

1 Selecionar a ferramenta Caneta. 

2 Clicar no ponto final de um dos traçados. 


3 Mover o ponteiro para o ponto final do outro traçado e dar um clique. 


Unir automaticamente traçados abertos semelhantes 

É possível unir facilmente um traçado aberto com outro que tenha características de traço e 
preenchimento semelhantes. 

Para unir automaticamente dois traçados abertos: 

1 Selecionar um traçado aberto. 


2 Selecionar a ferramenta Selecionar secundário e arrastar um ponto final do traçado para dentro 
de alguns pixels do final do traçado semelhante. 


O ponto final fica alinhado com o outro traçado e os dois se transformam em um único 
traçado. 


Edição de um traçado 


O Fireworks lhe oferece diversos métodos para edição de objetos vetoriais. É possível alterar a 
forma de um objeto movendo, adicionando ou excluindo pontos, ou, ainda, mover as alças de 
ponto para alterar a forma de segmentos de traçado adjacente. Ferramentas de forma livre 
permitem a alteração na forma dos objetos por meio da edição direta dos traçados. Além disso, é 
possível usar operações de traçado para criar novas formas, pela combinação ou alteração de 
traçados existentes. 


Edição com ferramentas vetoriais 


Além de arrastar pontos e alças de ponto, o usuário pode usar diversas ferramentas do Fireworks 
para editar objetos vetoriais diretamente. 
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Como dobrar e mudar a forma de objetos vetoriais 


A ferramenta Forma livre permite que o usuário dobre e mude a forma de objetos vetoriais 
diretamente, em vez de manipular os pontos. É possível empurrar ou puxar qualquer parte de um 
traçado, independentemente de onde os pontos estiverem localizados. O Fireworks adiciona, 
move ou exclui pontos automaticamente ao longo do traçado, à medida que a forma do objeto 
vetorial for alterada. 


«- Comprimento > 
especificado 


a 


Ferramenta Forma livre puxando um segmento de traçado 


EN 


“o 


Ferramenta Forma livre empurrando o segmento de um traçado e traçado redesenhado para refletir o 


puxado 


Quando o usuário move o ponteiro do mouse sobre um traçado selecionado, ele se transforma no 
ponteiro de empurrar ou puxar, dependendo da sua posição em relação ao traçado selecionado. 


Este ponteiro Indica que 


ha A ferramenta Forma livre está em uso. 


A ferramenta Forma livre está em uso e o ponteiro de puxar está em posição para puxar o 
traçado selecionado. 


7 


A ferramenta Forma livre está em uso e o ponteiro de puxar está puxando o 
traçado selecionado. 


e 
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Este ponteiro Indica que 


© A ferramenta Forma livre está em uso e o ponteiro de empurrar está ativo. 
A ferramenta Mudar forma da área está em uso e o ponteiro de mudança da área está ativo. A 
área do círculo interno para o círculo externo representa a intensidade reduzida. 


Quando o ponteiro estiver diretamente sobre o traçado, será possível puxar o traçado. Quando o 
ponteiro não estiver diretamente sobre o traçado, será possível empurrar o traçado. Você pode 
alterar o tamanho do ponteiro de empurrar e puxar. 


Nota: A ferramenta Forma livre da área também responde à pressão de um digitalizador Wacom ou de outra mesa 
digitalizadora compatível. 


Para puxar um traçado selecionado: 
1 Selecionar a ferramenta Forma livre. 
2 Mover o ponteiro diretamente sobre o traçado selecionado. 


O ponteiro é alterado para o ponteiro puxar. 


Ñ 


3 Arrastar o traçado. 


Para empurrar um traçado selecionado: 
1 Selecionar a ferramenta Forma livre. 


O ponteiro é alterado para o ponteiro empurrar e puxar. 


Ro 


2 Apontar ligeiramente para fora do traçado. 


3 Arrastar em direção ao traçado para empurrá-lo. Empurrar ou puxar o traçado selecionado para 
mudar sua forma. 


Para alterar o tamanho do ponteiro de empurrar, seguir um destes procedimentos: 


* Com o botão do mouse pressionado, pressionar a tecla Seta à direita ou 2, para aumentar a 
largura do ponteiro. 


* Com o botão do mouse pressionado, pressionar a tecla Seta à esquerda ou 1, para diminuir a 
largura do ponteiro. 


* Para definir o tamanho do ponteiro e o comprimento do segmento do traçado afetado, cancelar 
a seleção de todos os objetos do documento e, em seguida, digitar um valor de 1 a 500 na caixa 
de texto Tamanho do Inspetor de propriedades. O valor indica o tamanho do ponteiro em 
pixels. 
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Como distorcer um traçado 


É possível usar a ferramenta Mudar forma da área para puxar a área de todos os traçados 
selecionados para dentro do círculo externo do ponteiro de mudança de forma da área. 


a 


O círculo interno do ponteiro é o limite da ferramenta em sua intensidade total. A área entre os 
círculos interno e externo muda a forma dos traçados abaixo da intensidade total. O círculo 
externo do ponteiro determina o movimento gravitacional do ponteiro. Você pode definir a sua 
intensidade. 


Nota: A ferramenta Mudar forma da área também responde à pressão de um digitalizador Wacom ou de outra mesa 
digitalizadora compatível. 


Para distorcer traçados selecionados: 


1 Selecionar a ferramenta Mudar forma da área, localizada no menu pop-up da ferramenta 
Forma livre. 


2 Arrastar os traçados para redesenhá-los. 


Para alterar o tamanho do ponteiro de mudança de forma da área, seguir um destes 
procedimentos: 


* Com o botão do mouse pressionado, pressionar a tecla Seta à direita ou 2, para aumentar a 
largura do ponteiro. 


* Com o botão do mouse pressionado, pressionar a tecla Seta à esquerda ou 1, para diminuir a 
largura do ponteiro. 


* Para definir o tamanho do ponteiro e o comprimento do segmento do traçado afetado, cancelar a 
seleção de todos os objetos do documento e, em seguida, digitar um valor de 1 a 500 na caixa de 
texto Tamanho do Inspetor de propriedades. O valor indica o tamanho do ponteiro em pixels. 


Para definir a intensidade do círculo interno do ponteiro de mudança de forma da área: 


Digitar um valor de 1 a 100 na caixa de texto Força do Inspetor de propriedades. O valor indica a 
porcentagem de intensidade potencial do ponteiro. Quanto maior a porcentagem, maior será a 
intensidade. 
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Como redesenhar um traçado 
É possível usar a ferramenta Redesenhar traçado para redesenhar ou estender o segmento de um 
traçado selecionado, mantendo suas características de traço, preenchimento e efeitos. 
Para redesenhar ou estender o segmento de um traçado selecionado: 
1 Selecionar a ferramenta Redesenhar traçado, localizada no menu pop-up da ferramenta Caneta. 
2 Mover o ponteiro diretamente sobre o traçado. 
O ponteiro é transformado no ponteiro de redesenho de traçado. 


3 Arrastar o mouse para redesenhar ou estender um segmento de traçado. A parte do traçado a 
ser redesenhada está realçada em vermelho. 


4 Soltar o botão do mouse. 


Alteração da aparência de um traçado por pressão e velocidade variada 


Você pode alterar a aparência de um traçado usando as ferramentas Corretor de traçado. Com a 
utilização de pressão e velocidade variada, é possível alterar as propriedades do traço de um 
traçado. Essas propriedades incluem tamanho do traço, ângulo, quantidade de tinta, dispersão, 
matiz, luminosidade e saturação. É possível especificar quais as propriedades que serão afetadas 
pelas ferramentas Corretor de traçado usando a guia Sensibilidade da caixa de diálogo Editar 
traço. Além disso, pode-se especificar qual a quantidade de pressão e velocidade que afeta essas 
propriedades. Para detalhes sobre as opções de configuração da caixa de diálogo Editar traço, 
consultar “Como trabalhar com um traço” na página 198. 


Ferramentas Corretor de traçado 


Recorte de um traçado em vários objetos 


A ferramenta Faca permite fatiar um traçado em dois ou mais traçados. 


Pd 


Para recortar um traçado selecionado: 
1 Selecionar a ferramenta Faca. 
Nota: Se usar a borracha das canetas Wacom a ferramenta Faca será selecionada automaticamente. 
2 Seguir um destes procedimentos: 
e Arrastar o ponteiro no traçado. 
e Clicar no traçado. 


3 Cancelar a seleção do traçado. 
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Edição com operações de traçado 


É possível usar operações de traçado no menu Modificar para criar novas formas, por meio da 
combinação ou alteração de traçados existentes. No caso de algumas operações de traçado, a 
ordem de empilhamento dos objetos de traçado selecionados define o modo de funcionamento da 
operação. Para informações sobre como organizar a ordem de empilhamento de objetos 
selecionados, consultar “Empilhamento de um objeto” na página 123. 


Nota: O uso de uma operação de traçado remove todas as informações de pressão e velocidade dos traçados 
afetados. 


Combinação de um objeto de traçado 

Você pode combinar objetos de traçado em um único objeto de traçado. É possível conectar os 
pontos finais de dois traçados abertos para criar um único traçado fechado, ou pode-se unir vários 
traçados para criar um traçado composto. 

Para criar um traçado contínuo a partir de dois traçados abertos: 

1 Selecionar a ferramenta Selecionar secundário. 

2 Selecionar dois pontos finais nos traçados abertos. 


3 Selecionar Modificar > Combinar traçados > Unir. 


Para criar um traçado composto: 
1 Selecionar dois ou mais traçados abertos ou fechados. 


2 Selecionar Modificar > Combinar traçados > Unir. 


Para separar um traçado composto: 

1 Selecionar o traçado composto. 

2 Selecionar Modificar > Combinar traçados > Dividir. 

Para combinar traçados fechados selecionados como um traçado que abranja toda a área dos 
traçados originais: 


Selecionar Modificar > Combinar traçados > União. O traçado resultante assume os atributos de 
traço e preenchimento do objeto que está colocado mais atrás. 
Criação de um objeto a partir da interseção de outros objetos 


Com a utilização do comando Interseção, é possível criar um objeto a partir da interseção de dois ou 
mais objetos. 
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Para criar um traçado fechado que abranja a área comum a todos os traçados selecionados: 


Selecionar Modificar > Combinar traçados > Interseção. O traçado resultante assume os atributos 
de traço e preenchimento do objeto que está colocado mais atrás. 


Remoção de partes de um objeto de traçado 


É possível remover partes de um objeto de traçado selecionado, conforme definido pelas partes 
sobrepostas de outro objeto de traçado selecionado que está organizado na sua frente. 


OS 


Para remover partes de um objeto de traçado: 


1 Selecionar o objeto de traçado que define a área a ser removida. 
2 Selecionar Modificar > Organizar > Trazer para frente. 


3 Manter a tecla Shift pressionada e adicionar à seleção o objeto de traçado do qual as partes 
devem ser removidas. 


4 Selecionar Modificar > Combinar traçados > Perfuração. 


Os atributos de traço e preenchimento permanecem inalterados. 


Corte de um traçado 


É possível cortar um traçado usando a forma de um outro traçado. O traçado da frente ou o mais 
superior define a forma da área cortada. 


O U 


Para cortar um traçado selecionado: 


1 Selecionar o objeto de traçado que define a área a ser cortada. 
2 Selecionar Modificar > Organizar > Trazer para frente. 


3 Manter a tecla Shift pressionada e adicionar à seleção o objeto de traçado a ser cortado. 
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4 Selecionar Modificar > Combinar traçados > Cortar. 


O objeto de traçado resultante retém os atributos de traço e preenchimento do objeto que está 
colocado mais atrás. 


Simplificação de um traçado 


É possível remover pontos de um traçado e manter a mesma forma geral. O comando Simplificar 
remove os pontos redundantes do traçado na quantidade especificada. 


Convém usar o comando Simplificar se tiver uma linha reta com mais de dois pontos, 

por exemplo. (Só dois pontos são necessários para formar uma linha reta.) Ou, talvez, seu traçado 
tenha pontos que caiam exatamente um em cima do outro. O comando Simplificar removerá os 
pontos desnecessários para reproduzir o traçado desenhado. 


Para simplificar um traçado selecionado: 
1 Selecionar Modificar > Alterar traçado > Simplificar. 
A caixa de diálogo Simplificar é exibida. 
2 Digitar uma quantidade de simplificação e clicar em OK. 


À medida que aumentar a quantidade de simplificação, estará aumentando a quantidade que o 
Fireworks terá permissão para alterar o traçado de modo a reduzir o número de pontos nele 
existentes. 


Expansão de um traço 


É possível converter o traço de um traçado selecionado em traçado fechado. O traçado resultante 
cria a ilusão de um traçado sem preenchimento e um traço com os mesmos atributos que o 
preenchimento do objeto original. 


Nota: A expansão do traço de um traçado que faz interseção com ele próprio pode produzir resultados 
interessantes. Se o traçado original tiver um preenchimento, as partes de interseção do traçado não terão 
preenchimento depois da expansão do traço. 
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Para expandir o traço de um objeto selecionado: 


1 


Selecionar Modificar > Alterar traçado > Expandir traço para abrir a caixa de diálogo Expandir traço. 


Expandir traço 


Largura: | 10 | v 


Cantos: AJA | = 


Limite de meia-esquadria: 10.00 | 


Terminar maiúsculas: |= EO 


Definir a largura do traçado fechado resultante. 
Especificar um tipo de canto: meia-esquadria, redondo ou chanfrado. 


Se selecionar meia-esquadria, será necessário definir o limite de meia-esquadria, o ponto em 
que um canto de meia-esquadria se torna automaticamente um canto chanfrado. O limite de 
meia-esquadria é a proporção do comprimento do canto de meia-esquadria em relação à 
largura do traço. 


Selecionar uma opção de extremidade da linha: botão, quadrada ou redonda. Depois, clicar em OK. 


Um traçado fechado na forma do original e com os mesmos atributos de traço e preenchimento 
substitui o traçado original. 


Retração ou expansão de um traçado 


Você pode retrair ou expandir o traçado de um objeto selecionado em um número específico de pixels. 


Para expandir ou retrair um traçado selecionado: 


1 


Selecionar Modificar > Alterar traçado > Interiorizar traçado para abrir a caixa de diálogo 
Interiorizar traçado. 


Selecionar uma direção para retrair ou expandir o traçado: 

Dentro retrai o traçado. 

Fora expande o traçado. 

Definir a largura entre o traçado original e o traçado expandido ou retraído. 
Especificar um tipo de canto: meia-esquadria, redondo ou chanfrado. 


Se selecionar meia-esquadria, será necessário definir o limite de meia-esquadria, o ponto em 
que um canto de meia-esquadria se torna automaticamente um canto chanfrado. O limite de 
meia-esquadria é a proporção do comprimento do canto de meia-esquadria em relação à 
largura do traço. 


Clicar em OK. 


Um objeto de traçado maior ou menor com os mesmos atributos de traço e preenchimento 
substitui o objeto de traçado original. 
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CAPÍTULO 7 
Utilização de texto 


O Macromedia Fireworks MX tem muitos recursos de texto normalmente reservados para 
aplicativos de editoração eletrônica sofisticados. Você pode criar texto em várias fontes e 
tamanhos, além de ajustar kerning, espaçamento, cor, entrelinhamento, deslocamento da linha de 
base e muito mais. Combinar os recursos de edição de texto do Fireworks com a vasta gama de 
traços, preenchimentos, efeitos e estilos faz do texto um elemento vivo dos seus projetos gráficos. 
Também é possível usar o verificador ortográfico do Fireworks para corrigir erros ortográficos. 


A capacidade de editar texto a qualquer momento — mesmo depois de aplicar Efeitos ao vivo 
como sombras e chanfros — significa que é possível alterar o texto com facilidade. Também é 
possível copiar objetos que incluam texto e alterar o texto para cada cópia. Texto vertical, texto 
transformado, texto anexado a traçados e texto convertido em traçados ou imagens estendem as 
possibilidades de projeto. 


É possível importar texto mantendo os atributos RTF (Rich Text Format). Além disso, ao importar 
um documento Photoshop que contém texto, o texto permanece editável. O Fireworks trata fontes 
ausentes na importação pedindo para escolher uma fonte substituta ou permitindo importar texto 

como uma imagem estática. 


Digitação de texto 


Com a ferramenta Texto e as opções do Inspetor de propriedades, é possível digitar, formatar e 
editar texto em seus gráficos. 


Ferramenta Texto 


Nota: Se o Inspetor de propriedades estiver minimizado, clicar na seta de expansão no canto inferior direito para ver 
todas as propriedades do texto. 


Ferramenta E [100%] se l Normal ho © 


Texto 


Efeitos: +, 


4 
Pá Vá Suavizar serrilhado x] 
Kern automático EE 


O Inspetor de propriedades quando a ferramenta Texto estiver selecionada 
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Criação de bloco de texto 


Todo texto em um documento Fireworks aparece dentro de um retângulo com alças denominado 
bloco de texto. 


Para digitar texto: 
1 Escolher a ferramenta Texto. 
O Inspetor de propriedades exibe opções para a ferramenta Texto. 
2 Escolher fonte, tamanho, espaçamento e outras características de texto. 
3 Seguir um destes procedimentos: 


e Clicar no documento onde deseja que o bloco de texto comece. Será criado um bloco de texto 
de dimensionamento automático. 


e Arrastar para desenhar um bloco de texto. Será criado um bloco de texto com largura fixa. 


Para mais informações sobre os diferentes tipo de blocos de texto, consultar “Utilização de um 
bloco de texto de dimensionamento automático e largura fixa” na página 171. 


Digitar o texto. Para inserir uma quebra de parágrafo, pressionar Enter. 


Se desejar, realçar o texto no bloco de texto após digitá-lo e reformatá-lo. 


O o A 


Ao concluir a digitação do texto, seguir um destes procedimentos: 
e Clicar fora do bloco de texto. 
è Escolher outra ferramenta no painel Ferramentas. 


è Pressionar Esc. 


Como mover um bloco de texto 
É possível selecionar um bloco de texto e movê-lo para qualquer ponto do documento, como 
qualquer outro objeto. Também é possível mover blocos de texto ao arrastar para criá-los. 
Para mover um bloco de texto: 


Arrastá-lo até o novo local. 


Para mover um bloco de texto enquanto arrasta para criá-lo: 


1 Manter pressionado o botão do mouse, pressionar e manter pressionada a barra de espaço no 
teclado e arrastar o bloco de texto para outro local na tela. 


2 Soltar a barra de espaço para continuar a desenhar o bloco de texto. 
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Utilização de um bloco de texto de dimensionamento automático e largura fixa 


O Fireworks trabalha com blocos de texto de dimensionamento automático e blocos de texto de 
largura fixa. Um bloco de texto de dimensionamento automático expande-se horizontalmente à 
medida que o usuário digita. Se remover texto, o bloco de texto de dimensionamento automático 
encolherá para acomodar o texto restante. Blocos de texto de dimensionamento automático são 
criados por padrão quando clicar na tela com a ferramenta Texto e começar a digitar. 


Blocos de texto de largura fixa permitem controlar a largura de texto com quebra de linha. Esses 
são criados por padrão quando arrastar para desenhar um bloco de texto com a ferramenta Texto. 


Quando o ponteiro do texto estiver ativo em um bloco de texto, um círculo ou quadrado vazado 
aparece no canto superior direito do bloco de texto. O círculo indica que o bloco de texto é de 
dimensionamento automático; o quadrado indica que é de largura fixa. Clicar no canto alterna 
entre os dois. 


Indicador de largura fixa 
Indicador de dimensionamento automático 


Um bloco de texto de largura fixa e um bloco de texto de dimensionamento automático 


Para alterar um bloco de texto para largura fixa ou dimensionamento automático: 
1 Clicar duas vezes dentro do bloco de texto. 
2 Clicar duas vezes no círculo ou quadrado no canto superior direito do bloco de texto. 


O bloco de texto alterna para o outro tipo. 


Para alterar um bloco de texto selecionado para largura fixa redimensionando-o: 
Arrastar uma alça de redimensionamento. 


O bloco de texto é alterado automaticamente de dimensionamento automático para largura fixa. 


Edição de texto 


Em um bloco de texto, é possível variar todos os aspectos do texto, inclusive tamanho, fonte, 
espaçamento, entrelinhamento e deslocamento da linha de base. Ao editar o texto, seus atributos 
de traço, preenchimento e efeitos serão respectivamente redesenhados. 


É possível alterar os atributos de um bloco de texto, usando o Inspetor de propriedades. Se o 
Inspetor de propriedades estiver minimizado, clicar na seta de expansão no canto inferior direito 
para ver todas as propriedades do texto. 


w” B Texto Arial ~ 


S | B[oris [noma ~| © 
Z 


Efeitos: +, 
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: = 
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Suavizar serrilhado 


Inspetor de propriedades quando o texto estiver selecionado 
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Também é possível usar o Editor de texto e os comandos no menu Texto para editar texto, mas o 
Inspetor de propriedades oferece o meio mais rápido para alterar os atributos de texto e 
proporciona controle de edição mais detalhado do que as outras duas opções. Para mais 
informações sobre o Editor de texto, consultar “Utilização do Editor de texto” na página 186. 


Nota: As alterações feitas durante um sessão de edição de texto consistem em apenas um Desfazer. Escolher 
Editar > Desfazer durante a edição de texto desfará todas as edições feitas a partir do momento em que clicou duas 
vezes no bloco de texto para editar seu conteúdo. 

Para editar o texto: 

1 Selecionar o texto que deseja alterar: 


e Clicar em um bloco de texto com a ferramenta Ponteiro ou Selecionar secundário para 
selecionar o bloco inteiro. Para selecionar vários blocos simultaneamente, manter pressionada a 
tecla Shift ao selecionar cada bloco. 


e Clicar duas vezes em um bloco de texto com a ferramenta Ponteiro ou Selecionar secundário e 
realçar um intervado de texto. 


e Clicar dentro de um bloco de texto com a ferramenta Texto e realçar um intervalo de texto. 
2 Fazer as alterações. 


Para mais informações sobre como alterar atributos de texto, consultar “Escolha de fonte, 
tamanho e estilo do texto” na página 172, “Aplicação de cor do texto” na página 173, 
“Configuração de kerning” na página 174, “Configuração de entrelinhamento” na página 175, 
“Configuração da orientação do texto” na página 176, “Configuração do alinhamento de 
texto” na página 177 e “Recuo do texto” na página 177. 


3 Seguir um destes procedimentos para aplicar as alterações: 
e Clicar fora do bloco de texto. 
* Escolher outra ferramenta no painel Ferramentas. 


è Pressionar Esc. 


Escolha de fonte, tamanho e estilo do texto 


Usar o Inspetor de propriedades para alterar a fonte, o tamanho e os atributos de estilo do texto 
em um bloco de texto. 


Nota: Para usar fontes Tipo 1 nos sistemas operacionais Macintosh 9.x, é necessário o Adobe Type Manager 4 ou 
posterior. Ele não é necessário para o OS X. 


Para alterar a fonte, o tamanho e o estilo do texto selecionado usando o Inspetor de propriedades: 


1 Para alterar a fonte, escolher uma fonte no menu pop-up Fontes. 


Arial ve | [12 “E NIS 


2 Para alterar o tamanho da fonte, arrastar o controle deslizante pop-up Tamanho da fonte ou 
digitar um valor na caixa de texto. O tamanho da fonte é medido em pontos. 


3 Para aplicar um estilo negrito, itálico ou sublinhado, clicar no botão de estilo correspondente. 


Nota: Quando transformar um bloco de texto e o resultado for texto redimensionado ou escalonado, o tamanho da 
fonte antes da transformação continuará o mesmo no Inspetor de propriedades quando o texto for selecionado. 
Alterações subsequentes do tamanho da fonte do texto transformado alterarão o tamanho do texto, mas apenas 
em relação à transformação. 
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Aplicação de cor do texto 


A cor do texto é controlada pela caixa Cor de preenchimento. Por padrão, o texto é preto e sem 
traço. É possível alterar a cor de todo o texto em um bloco de texto selecionado ou do texto 

realçado em um bloco de texto. A ferramenta Texto mantém a cor atual do texto de um bloco de 
texto para outro. 


A ferramenta Texto mantém a cor atual do texto independentemente da cor de preenchimento de 


outras ferramentas. Quando usar outra ferramenta depois de usar a ferramenta Texto, as 
configurações de preenchimento e traço reverterão às configurações mais recentes antes da 
utilização da ferramenta Texto. Da mesma forma, quando retornar à ferramenta Texto, a cor de 
preenchimento reverterá à configuração mais recente da ferramenta Texto e o traço será redefinido 
como Nenhum. A cor atual da ferramenta Texto será retida quando alternar de um documento 
para outro ou fechar e reabrir o Fireworks. 


Pode-se adicionar um traço e Efeitos ao vivo a todo o texto em um bloco de texto selecionado, 
mas não realçar o texto. As características e Efeitos ao vivo aplicados a um bloco de texto são 
atualizados quando editar o texto no bloco de texto, mas a ferramenta Texto não reterá as 


características do traço ou Ffeitos ao vivo se criar um novo bloco de texto. Para mais informações, 


consultar “Como aplicar traços, preenchimentos e efeitos ao texto” na página 180. 


Como aplicar cor a todo o texto em blocos de texto selecionados 


É possível aplicar cor de texto a todo o texto nos blocos de texto selecionados usando o Inspetor 
de propriedades, qualquer caixa Cor de preenchimento ou a ferramenta Conta-gotas. Também é 
possível usar qualquer um desses métodos para definir a cor do texto para a ferramenta Texto. 


Para definir a cor do texto para todo o texto em um bloco de texto selecionado, seguir um destes 


procedimentos: 


e Clicar na caixa Cor de preenchimento no Inspetor de propriedades e escolher uma cor na 


janela pop-up de cores ou amostrar uma cor de qualquer lugar na tela usando o ponteiro gonta- 


gotas enquando a janela estiveraberta. 
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Caixa Cor de preenchimento no Inspetor de propriedades 
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e Clicar na caixa Cor de preenchimento no painel Ferramentas e escolher uma cor na janela pop- 
up de cores ou amostrar uma cor de qualquer lugar na tela usando o ponteiro gonta-gotas 
enquando a janela pop-up estiver aberta. 


e Clicar no ícone ao lado da caixa Cor de preenchimento no painel Ferramentas, escolher a 
ferramenta Conta-gotas e clicar para amostrar uma cor em qualquer lugar de qualquer 
documento aberto. 


A cor na caixa Cor de preenchimento no painel Ferramentas muda para refletir a cor amostrada 
com o ponteiro conta-gotas ou com a ferramenta Conta-gotas, e a cor do texto selecionado também 
muda. 


Como aplicar cor ao texto realçado em um bloco de texto 


É possível alterar a cor do texto realçado em um bloco de texto usando o Inspetor de propriedades 
ou qualquer caixa Cor de preenchimento. Não é possível usar a ferramenta Conta-gotas para 
editar a cor do texto realçado. 


Nota: Se tentar aplicar um traço ou Efeitos ao vivo ao texto realçado em um bloco de texto, o bloco de texto inteiro 
será automaticamente selecionado. 
Para aplicar cor de texto apenas ao texto selecionado em um bloco de texto, seguir um destes 


procedimentos: 


e Clicar na caixa Cor de preenchimento no Inspetor de propriedades e escolher uma cor da 
janela pop-up de cores ou amostrar uma cor de qualquer lugar na tela usando o ponteiro gonta- 
gotas enquando a janela pop-up estiver aberta. 


e Clicar na caixa Cor de preenchimento no painel Ferramentas e escolher uma cor na janela pop- 
up de cores ou amostrar uma cor de qualquer lugar na tela usando o ponteiro gonta-gotas 
enquando a janela pop-up estiver aberta. 


Configuração de kerning 


O kerning aumenta ou diminui o espaçamento entre certos pares de letras para melhorar a 
aparência. A maioria das fontes inclui informações que automaticamente reduzem a quantidade 
de espaço entre certos pares de letras, como “TA” ou “Va.” O kerning automático do Fireworks 
utiliza informações de kerning de uma fonte ao exibir texto, mas é possível desativá-lo em 
tamanhos de ponto menores ou quando o texto não tiver suavização de serrilhado. O kerning é 
medido como um porcentagem. 


Para definir o kerning, usar o Inspetor de propriedades ou o teclado. 


Para desabilitar o kerning automático: 

No Inspetor de propriedades, desmarcar Kern automático. Se o Inspetor de propriedades estiver 
minimizado, clicar na seta de expansão no canto inferior direito para ver todas as propriedades. 
Para definir o kerning: 

1 Seguir um destes procedimentos para selecionar o texto para fazer kerning: 

e Clicar entre dois caracteres com a ferramenta Texto. 

e Usar a ferramenta Texto para realçar os caracteres que deseja alterar. 


e Usar a ferramenta Ponteiro para selecionar um bloco de texto inteiro. Clicar com Shift para 
selecionar vários blocos de texto. 
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2 Seguir um destes procedimentos: 


e No Inspetor de propriedades, arrastar o controle deslizante pop-up Kerning ou digitar uma 
porcentagem na caixa de texto. 


Porcentagem de kerning 


Arial 
av [e | Controle deslizante pop-up de kerning 


Zero representa kerning normal. Valores positivos distanciam as letras. Valores negativos 
aproximam as letras. 


* Manter pressionada a tecla Control (Windows) ou Command (Macintosh) enquanto pressiona 
as teclas seta à esquerda ou seta à direita no teclado. 


A tecla de seta à esquerda distancia as letras em 1% e a tecla de seta à direita aproxima as letras 
em 1%. 


Dica: Manter pressionada as teclas Shift e Control (Windows) ou Shift e Command (Macintosh) enquanto 
pressiona as teclas seta à esquerda ou seta à direita para ajustar o kerning em incrementos de 109%. 


Configuração de entrelinhamento 


O entrelinhamento determina a distância entre linhas adjacentes em um parágrafo. O 
entrelinhamento pode ser medido em pixels ou como uma porcentagem do tamanho do ponto 
que as linhas são separadas de uma linha de base a outra. 


Para definir o entrelinhamento, usar o Inspetor de propriedades ou o teclado. 


Opções de entrelinhamento no Inspetor de propriedades 


Para definir o entrelinhamento do texto selecionado no Inspetor de propriedades: 


1 No Inspetor de propriedades, arrastar o controle deslizante pop-up Entrelinhamento ou digitar 
um valor na caixa de texto. O padrão é 100%. 


2 Paraalterar o tipo de unidade do entrelinhamento, escolher % ou px (pixels) no menu pop-up 
Unidades de entrelinhamento. 
Para definir o entrelinhamento do texto selecionado usando o teclado: 


Manter pressionada a tecla Control (Windows) ou Command (Macintosh) enquanto pressiona as 
teclas seta para cima ou tecla para baixo. 


A tecla de seta para cima distancia as linhas e a tecla de seta para baixo as aproxima. 


Dica: Manter pressionadas as teclas Shift e Control (Windows) ou Shift e Command (Macintosh) enquanto 
pressiona as teclas seta para cima ou seta para baixo para ajustar o kerning em incrementos de 10%. 
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Configuração da orientação do texto 


Ab 
cd 


Um bloco de texto pode ser orientado horizontal ou verticalmente. Por padrão, o texto é 
orientado horizontalmente. 
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Orientação horizontal e vertical 


O texto também pode fluir da direita para a esquerda ou da esquerda para a direita. 


alucnugak laguncula 


Texto fluindo da esquerda para a direita e da direita para a esquerda 


No Fireworks, é possível definir a orientação horizontal e vertical, assim como a direção do fluxo 
de texto no Inspetor de propriedades. Essas configurações se aplicam apenas a blocos de texto 
inteiros. 


Para definir a orientação de um bloco de texto selecionado: 
1 Clicar no botão Orientação do texto no Inspetor de propriedades. 
2 Selecionar uma opção de orientação no menu pop-up: 


Horizontal da esquerda para a direita é a configuração padrão do texto no Fireworks, para a 
maior parte dos idiomas. Ela orienta o texto na horizontal e exibe os caracteres da esquerda 
para a direita. 


Horizontal da direita para a esquerda orienta o texto na horizontal e exibe os caracteres da direita 
para a esquerda. É útil para exibir texto em idiomas em que o texto flui da direita para a esquerda 
como hebraico ou árabe. 


Vertical da esquerda para a direita orienta o texto verticalmente. Se aplicar esta definição às 
linhas de texto separadas por quebras de linha condicional ou incondicional, cada linha de 
texto será exibida como uma coluna. As colunas fluem da esquerda para a direita. 


Vertical da direita para a esquerda orienta o texto verticalmente. Várias linhas de texto 
separadas por quebras de linha são exibidas como colunas que fluem da direita para a esquerda. 
Esta opção é útil para exibir texto em idiomas em que o texto flui da direita para a esquerda em 
colunas como o japonês. 


Nota: Os caracteres de texto vertical sempre fluem do topo para a base. Escolher uma das opções de 
orientação Vertical afetará apenas a ordem das colunas de texto, não a ordem dos caracteres. 
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Configuração do alinhamento de texto 


O alinhamento determina a posição de um parágrafo de texto relativo às bordas do bloco de texto. 
O alinhamento horizontal do texto é feito em relação às bordas esquerda e direita de um bloco de 
texto. O alinhamento vertical do texto é feito em relação às bordas superior e inferior de um bloco 
de texto. Para mais informações sobre como configurar a orientação de texto vertical ou 
horizontal, consultar “Configuração da orientação do texto” na página 176. 


É possível alinhar o texto horizontal à borda esquerda ou direita do bloco de texto, centralizá-lo 
ou justificá-lo completamente, para que o texto fique alinhado às bordas esquerda e direita. Por 
padrão, o texto horizontal é alinhado à esquerda. 


O texto vertical pode ser alinhado ao topo ou à base de um bloco de texto, centralizado dentro de 
um bloco de texto ou justificado completamente entre as bordas superior e inferior. 


Para atingir um efeito alongado, ou para encaixar o texto em um espaço específico, pode-se definir o 
alinhamento para esticar o texto horizontal (para texto orientado na horizontal) ou verticalmente 
(para texto orientado na vertical). 


lagunculam! 


Texto horizontal esticado para preencher um bloco 


Os controles de alinhamento aparecem no Inspetor de propriedades quando o texto for realçado 
ou um bloco de texto for selecionado. 


Opções de alinhamento de texto no Inspetor de propriedades 


Para definir o alinhamento de texto: 
1 Selecionar o texto. 


2 Clicar em um botão de alinhamento no Inspetor de propriedades. 


Recuo do texto 


É possível recuar a primeira linha de um parágrafo usando o Inspetor de propriedades. O recuo é 
medido em pixels. 


Opção de recuo de parágrafo no Inspetor de propriedades 


Se o Inspetor de propriedades estiver minimizado, clicar na seta de expansão no canto inferior 
direito para ver todas as propriedades. 


Para recuar a primeira linha de parágrafos selecionados: 


No Inspetor de propriedades, arrastar o controle deslizante pop-up Recuo do parágrafo ou digitar 
um valor na caixa de texto. 
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Configuração do espaçamento de parágrafo 


É possível especificar o espaçamento desejado antes e depois dos parágrafos usando o Inspetor de 
propriedades. O espaçamento de parágrafo é medido em pixels. 


Opções de espaçamento de parágrafo no Inspetor de propriedades 


Se o Inspetor de propriedades estiver minimizado, clicar na seta de expansão no canto inferior 
direito para ver todas as propriedades. 
Para definir o espaço que precede os parágrafos selecionados: 


No Inspetor de propriedades, arrastar o controle deslizante pop-up Espaço para o parágrafo anterior. 


Para definir o espaço depois dos parágrafos selecionados: 


No Inspetor de propriedades, arrastar o controle deslizante pop-up Espaço depois do parágrafo ou 
digitar um valor na caixa de texto. 


Suavização das bordas de texto 


Para suavizar uma borda de texto, fazer a suavização de serrilhado nela. Isso faz com que as bordas 
do texto misturem-se com o fundo de modo que o texto fique mais limpo e legível quando for 
ampliado. 


Para definir a suavização de serrilhado, usar o Inspetor de propriedades. Se o Inspetor de 

ç 
propriedades estiver minimizado, clicar na seta de expansão no canto inferior direito para ver 
todas as propriedades. 


Suavizar serrilhado 4 
Kern automático 


Opções de suavização de serrilhado no Inspetor de propriedades 


A suavização de serrilhado se aplica a todos os caracteres em um dado bloco de texto. 


Para aplicar uma borda com serrilhado suavizado ao texto selecionado: 


No Inspetor de propriedades, escolher uma opção no menu pop-up Nível de suavização de 
serrilhado: Ondular, Forte, Suavizar, Sem suavização de serrilhado. 
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Nota: Quando abrir arquivos vetoriais como arquivos do FreeHand, no Fireworks, o texto apresentará suavização 
de serrilhado. Para editar este atributo, usar o Inspetor de propriedades. Para mais informações sobre como abrir 
arquivos vetoriais, consultar “Como trabalhar com outros aplicativos gráficos vetoriais” na página 385. 


Expansão e contração da largura de caractere 


É possível expandir ou contrair a largura de caractere do texto horizontal usando a opção Escala 
horizontal no Inspetor de propriedades. 


A escala horizontal é medida em valores percentuais. 100% é o padrão. 


Opção Escala horizontal no Inspetor de propriedades 


Se o Inspetor de propriedades estiver minimizado, clicar na seta de expansão no canto inferior 
direito para ver todas as propriedades. 


Para expandir ou contrair caracteres selecionados: 


No Inspetor de propriedades, arrastar o controle deslizante pop-up Escala horizontal ou digitar 
um valor na caixa de texto. Arrastar o controle deslizante para valores superiores a 100% 
expandirá a largura ou altura dos caracteres, e arrastá-lo para valores inferiores contrairá a largura 
ou altura dos caracteres. 


Configuração do deslocamento da linha de base 


O deslocamento da linha de base determina o grau de proximidade que o texto ficará acima ou 
abaixo da sua linha de base natural. O texto ficará sobre a linha de base se essa não for deslocada. 
Usar o deslocamento da linha de base para criar caracteres subscritos e sobrescritos. 


Non £St quod contemnas hoc studendi genus. 


Os controles de deslocamento da linha de base estão no Inspetor de propriedades. O 
deslocamento da linha de base é medido em pixels. 


Opção de deslocamento da linha de base no Inspetor de propriedades 


Para definir o deslocamento da linha de base: 


No Inspetor de propriedades, arrastar o controle deslizante pop-up Deslocamento da linha de 
base ou digitar um valor na caixa de texto para especificar o valor para sobrescrever ou subscrever 
o texto. Para criar caracteres sobrescritos, inserir valores positivos. Para criar caracteres subscritos, 
inserir valores negativos. 
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Como aplicar traços, preenchimentos e efeitos ao texto 


É possível aplicar traços, preenchimentos e efeitos ao texto em um bloco de texto selecionado, 
como a qualquer outro objeto. Pode-se aplicar qualquer estilo do painel Estilos no texto, mesmo 
se não for um estilo de texto. Além disso, é possível criar um novo estilo salvando os atributos de 
texto. 


O texto criado poderá ser editado no Fireworks. Traços, preenchimentos, efeitos e estilos são 
atualizados automaticamente durante a edição do texto. 


P F 


Texto com traço, preenchimento e estilo aplicado 


É possível aplicar cor de texto sólida ao texto realçado em um bloco de texto. Contudo, os 
atributos de traço, Efeitos ao vivo e atributos de preenchimento não sólido como preenchimentos 
em dégradé são aplicados a todo o texto no bloco selecionado, não apenas ao texto realçado. 


Para mais informações sobre traços e preenchimentos, consultar Capítulo 8, “Aplicação de cor, 
traço e preenchimento”, na página 189. Para mais informações sobre como usar estilos, consultar 
“Uso de um estilo” na página 249. Para mais informações sobre Efeitos ao vivo, consultar 
“Aplicação de Efeitos ao vivo” na página 213. 


A ferramenta Texto não reterá configurações de traço ou Efeito ao vivo quando criar um novo 
bloco de texto. Entretanto, é possível salvar atributos como traço, preenchimento e Efeitos ao vivo 
aplicados ao texto, para reutilização como um estilo no painel Estilos. Salvar atributos de texto 
como estilo não salva o texto propriamente dito, apenas os efeitos. 


Para salvar atributos de texto como estilo: 

1 Criar um objeto de texto e aplicar os atributos desejados. 
Selecionar o objeto de texto. 
Escolher Novo estilo no painel Estilos do menu Opções. 


2 
3 
4 Escolher as propriedades para o novo estilo e nomeá-lo. 
5 


Clicar em OK. 


Anexação de texto a um traçado 


Para liberar o texto das restrições de blocos de texto retangulares, desenhar um traçado e anexar 
texto a ele. O texto flui ao longo da forma do traçado e ainda pode ser editado. Para mais 
informações sobre como desenhar diferentes tipos de traçados, consultar “Desenho de formas 
básicas” na página 147. 


Um traçado ao qual um texto está anexado perde temporariamente seus atributos de traço, 
preenchimento e efeito. Qualquer traço, preenchimento e atributos de efeito aplicados 
subsegiientemente serão aplicados ao texto, não ao traçado. Se depois o usuário separar o texto do 
traçado, este recuperará seus atributos de efeito, preenchimento e traço. 


Nota: Anexar texto que contém quebras de linha condicionais ou incondicionais pode produzir resultados 
inesperados. 
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Se o texto anexado a um traçado aberto exceder o comprimento do traçado, o texto restante 
retornará e reproduzirá a forma do traçado. 


O texto em um traçado que retorna e repete a forma do traçado 


Para incluir texto em um traçado: 
1 Manter pressionada a tecla Shift e selecionar um bloco de texto e um traçado. 


2 Escolher Texto > Anexar ao traçado. 


Para separar o texto de um traçado selecionado: 


Escolher Texto > Separar a partir do traçado. 


Edição de traçados e texto anexado a traçados 


É possível editar o texto anexado a um traçado. Além disso, pode-se editar a forma do traçado. 


Para editar o texto anexado a um traçado, seguir um destes procedimentos: 
e Clicar duas vezes no objeto de texto em um traçado com a ferramenta Ponteiro ou Subseleção. 


e Escolher a ferramenta Texto e selecionar o texto a editar. 


Para editar a forma do traçado: 
1 Escolher Texto > Separar a partir do traçado. 
2 Editar o traçado. 


3 Colocar o texto de volta no traçado. 


Alteração da orientação e direção do texto em um traçado 


A ordem em que desenhar um traçado estabelece a direção do texto a ele anexado. Por exemplo, se 
desenhar um traçado da direita para a esquerda, o texto anexado aparecerá de trás para frente e de 
cabeça para baixo. 


— wepnounde 


Texto anexado a um traçado desenhado da direita para a esquerda 
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É possível inverter a direção ou alterar a orientação do texto anexado a um traçado. Além disso, 
pode-se alterar o ponto inicial do texto em um traçado. 


Para alterar a orientação de texto em um traçado selecionado: 


Escolher Texto > Orientação e selecionar uma orientação. 


Para inverter a direção do texto em um traçado selecionado: 


Escolher Texto > Inverter direção. 


Texto girado ao redor do traçado 


Texto orientado verticalmente em um traçado 


jaguNCUlan, 


Texto inclinado verticamente ao redor do traçado 


Texto inclinado horizontalmente ao redor do traçado 


Para mover o ponto inicial do texto anexado a um traçado: 
1 Selecionar o objeto de texto em um traçado. 


2 No Inspetor de propriedades, digitar um valor na caixa de texto Deslocamento do texto. Em 
seguida, pressionar Enter. 


Nota: Se o Inspetor de propriedades estiver minimizado, clicar na seta de expansão no canto inferior direito para 
vertodas as propriedades. 
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Transformação de texto 


É possível transformar blocos de texto da mesma forma que outros objetos. É possível colocar em 
escala, girar, inclinar e virar o texto para criar efeitos de texto sem igual. 


Você ainda pode editar o texto transformado, embora transformações maiores possam dificultar a 
leitura. Transformar texto não altera o tamanho do ponto do texto. Quando transformar um 
bloco de texto e o resultado for texto redimensionado ou escalonado, o tamanho da fonte antes da 
transformação continuará o mesmo no Inspetor de propriedades quando o texto for selecionado. 
Alterações subsegientes do tamanho da fonte do texto transformado alterarão o tamanho do 
texto, mas apenas em relação à transformação. Para mais informações, consultar “Transformação e 
distorção de objetos selecionados e seleções” na página 118. 


Conversão de texto em traçados 


Você pode converter texto em traçados e depois editar as formas das letras como faria com 
qualquer objeto vetorial. Todas as ferramentas de edição vetorial estão disponíveis para editar o 
texto após sua conversão em traçados. No entanto, ele não poderá mais ser mais editado como 
texto. 


Para converter o texto selecionado em traçados: 


Escolher Texto > Converter em traçados. 


O texto convertido em traçados mantém todos os seus atributos visuais, mas só é possível editá-lo 
como traçados. É possível editar o texto convertido como um grupo ou editar os caracteres 
convertidos de modo individual. 


PRIP 


Para editar traçados de caracteres de texto convertido individualmente, seguir um destes 
procedimentos: 


e Selecionar o texto convertido com a ferramenta Subseleção. 
* Selecionar o texto convertido e escolher Modificar > Desagrupar. 


Para editar os traçados de caracteres de texto convertido individualmente, usar as ferramentas 
de edição vetorial. Para mais informações sobre como editar traçados, consultar “Edição de um 
traçado” na página 159. 

É possível criar um traçado composto a partir de um objeto de texto criado por meio da conversão 


de texto em traçados. 


Para criar um traçado composto a partir de um grupo de traçados criado por meio da conversão 
de texto em traçados: 


1 Selecionar o grupo de traçados. 
2 Escolher Modificar > Desagrupar. 


3 Escolher Modificar > Combinar traçados > Unir. 
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Importação de texto 


Você pode usar texto de outros documentos com o recurso arrastar-e-soltar, ou copiar-e-colar o 
documento fonte no documento Fireworks atual. Pode também abrir ou importar um arquivo de 
texto inteiro no Fireworks. 


O Fireworks pode importar formatos RTF (rich text format) e ASCII (texto regular). 


Para abrir ou importar um arquivo de texto: 
1 Escolher Arquivo > Abrir ou Arquivo > Importar. 
2 Navegar até a pasta que contém o arquivo. 


3 Selecionar o arquivo e clicar em OK. 


Texto do Photoshop 


É possível abrir ou importar um arquivo Photoshop que contém texto, ou copiar-e-colar, ou 
arrastar-e-soltar texto de um arquivo Photoshop no documento Fireworks atual. Para mais 
informações, consultar “Colocação de um gráfico do Photoshop no Fireworks” na página 395. 


Arquivos RTF 
Ao importar texto RTE o Fireworks mantém estes atributos: 
* Fonte, tamanho e estilo (negrito, itálico, sublinhado) 
e Alinhamento (esquerda, direita, centralizado, justificado) 
° Entrelinhamento 
è Deslocamento da linha de base 
è Kerning da faixa 
è Escala horizontal 
e Cor do primeiro caractere 
Todas as outras informações de RTF são ignoradas. 


O Fireworks não pode importar texto RTF usando os recursos de copiar-e-colar ou arrastar-e- 
soltar. 


Texto ASCII 


É possível importar texto ASCII usando qualquer um dos métodos de importação. O texto ASCII 
importado é configurado para a fonte padrão atual, com 12 pixels de altura e utiliza a cor de 
preenchimento atual. 


Tratamento de fontes ausentes 


Se o usuário abrir um documento no Fireworks que contém fontes que não estejam instaladas no 
computador, o Fireworks perguntará se deseja substituir as fontes ou manter sua aparência. Isto 
será útil ao compartilhar arquivos com outros usuários em outros computadores que talvez não 
tenham as mesmas fontes instaladas. 
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Escolher Manter aparência substitui o texto pela imagem bitmap que representa a aparência do 
texto na sua fonte original. Ainda é possível editar o texto, mas se fizer isso, o Fireworks 
substituirá a imagem bitmap pela fonte que estiver instalada no sistema. A aparência do texto 
pode ser alterada. 


É possível escolher fontes para substituir as fontes ausentes. Uma vez substituídas as fontes, o 
documento é aberto e é possível editar e salvar o texto. Quando o arquivo for reaberto em um 
computador que contenha as fontes originais, o programa se lembrará da fonte original. 
Para selecionar uma fonte de substituição: 
1 Abrir um documento com as fontes ausentes. 
A caixa de diálogo Fontes ausentes se abre. 
2 Escolher uma fonte ausente na lista Alterar fonte ausente. 
3 Seguir um destes procedimentos: 
* Escolher uma fonte de substituição na lista Para. 
è Escolher exibir o texto na fonte padrão do sistema. 
e Para deixar a fonte inalterada, clicar em Sem alteração. 


4 Clicar em OK. 


Da próxima vez que abrir um documento com as mesmas fontes ausentes, a caixa de diálogo 
Fontes ausentes conterá as fontes selecionadas. 


Verificação ortográfica 
Para verificar a ortografia de blocos de texto específicos ou de todo o texto em um documento, 
usar o comando Verificar a ortografia no menu Texto. 
Para verificar a ortografia do texto: 


1 Selecionar um ou mais blocos de texto. Se nenhum bloco de texto for selecionado, a correção 
ortográfica será verificada no documento inteiro. 


2 Escolher Texto > Verificar a ortografia. 


3 Se não tiver verificado a ortografia no Fireworks antes, aparecerá uma caixa de diálogo 
solicitando a escolha de um dicionário. Clicar em OK para fechar a caixa de diálogo. Escolher 
um idioma na lista Dicionário e clicar em OK. 


Se não escolher um idioma, será solicitado a escolher um dicionário toda vez que verificar a 
ortografia de um documento. 


Nota: A opção Macromedia.tlx está sempre selecionada no topo da lista de dicionários. Para mais informações 
sobre esta opção, consultar “Personalização da verificação ortográfica” na página 186. 


4 A caixa de diálogo Verificar a ortografia aparece. Para cada palavra encontrada, escolher a 
opções apropriada: 


Adicionar a Pessoais adiciona a palavra não reconhecida ao seu dicionário pessoal. 
Ignorar ignora a ocorrência atual da palavra não reconhecida. 


Ignorar todas ignora todas as ocorrências da palavra não reconhecida durante a sessão atual de 
verificação da correção ortográfica. A palavra não reconhecida será identificada novamente da 
próxima vez que fizer a verificação ortográfica. 
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Alterar substitui a ocorrência atual da palavra não reconhecida pelo texto digitado na caixa 
Alterar para ou pela seleção na lista Sugestões. 


Alterar tudo substitui todas as ocorrências da palavras não reconhecida da mesma maneira. 
Excluir remove uma palavra duplicada. 


Quando o Fireworks concluir a verificação da correção ortográfica em um documento, a caixa 
de diálogo Verificar a ortografia aparece indicando que a verificação da correção ortográfica está 
concluída. 


Personalização da verificação ortográfica 


É possível personalizar como o Fireworks verifica a ortografia de documentos usando a caixa de 
diálogo Configuração da correção ortográfica. 


Daqui é possível especificar um ou mais dicionários que o Fireworks usará durante a verificação 
ortográfica, assim como editar as palavras no seu Dicionário pessoal. Também é possível 
especificar os itens desejados para a verificação ortográfica do Fireworks, inclusive endereços de 
Internet e de arquivos. 

Para personalizar a verificação ortográfica no Fireworks: 

1 Seguir um destes procedimentos: 

* Escolher Texto > Configuração da verificação ortográfica. 

e Clicar no botão Configurar na caixa de diálogo Verificar a ortografia. 

2 Escolher as opções desejadas na caixa de diálogo Configuração da verificação ortográfica: 


è Escolher um ou mais dicionários. 


Nota: A opção Macromedia.tlx está sempre selecionada no topo da lista de dicionários. Este é o arquivo que 
contém seu dicionário personalizado de correção ortográfica. 


* Para buscar o dicionário personalizado, clicar no ícone da pasta ao lado da caixa de 
texto Caminho do dicionário pessoal. 


* Para editar o dicionário personalizado, clicar no botão Editar dicionário pessoal e adicionar, 
excluir ou modificar as palavras na lista. 


è Escolher os tipos de palavras que deseja incluir na verificação ortográfica. 
3 Clicarem OK. 


Utilização do Editor de texto 


No Fireworks 4 e versões anteriores, o texto era criado e editado usando o Editor de texto. Todas 
as opções de edição e formatação de texto encontradas no Editor de texto estão agora localizadas 
no Inspetor de propriedades. Contudo, ainda é possível acessar o Editor de texto pelo menu 
Texto. 


O Editor de texto é útil para trabalhar com o texto difícil de editar na tela, como grandes blocos 
de texto, texto anexado a um traçado ou texto com fontes e tamanhos difíceis de ler. É possível 
escolher exibir este texto na fonte e tamanho padrão do sistema se for necessário para facilitar a 
edição. 


Nota: Alguns recursos de texto novos no Fireworks MX não estão disponíveis no Editor de texto. 
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Para exibir o Editor de texto: 
1 Selecionar um bloco de texto e escolher Texto > Editor. 
2 Modificar e formatar o texto usando as opções disponíveis. 


3 Clicar em OK e aplicar as alterações e fechar o Editor de texto. 


Para visualizar o texto na fonte do sistema: 


Cancelar a seleção Mostrar fonte no Editor de texto. 


C| Mostrar fonte 


Para exibir o texto no tamanho padrão: 


Cancelar a seleção Mostrar tamanho & cor no Editor de texto. 


[C] Mostrar tamanho & cor 
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CAPÍTULO 8 
Aplicação de cor, traço e preenchimento 


O Macromedia Fireworks MX oferece uma ampla gama de painéis, ferramentas e opções para 
organizar, escolher e aplicar cores a imagens bitmap e a objetos vetoriais. 


O painel Exemplos de cores inclui opções que permitem a escolha de um grupo de exemplos 
predefinidos como Cubos de cor, Tom contínuo ou Tons de cinza, ou a criação de grupos de 
exemplos personalizados que incluam suas cores favoritas ou as cores aprovadas pelo cliente. O 
Misturador de cores apresenta opções que possibilitam a escolha de um modelo de cor como 
Hexadecimal, RGB ou Tons de cinza, assim como a escolha das cores de traços e preenchimentos, 
diretamente na barra de cores ou por meio da inserção de valores específicos da cor. 


O espaço de trabalho do Fireworks contém caixas de cores que mostram as escolhas de cores atuais 
para opções e características de objetos. Um clique em uma caixa de cor abre uma janela pop-up 
de cores, na qual é possível escolher uma cor para a caixa de cor. Para aplicar uma cor à caixa de 
cor, basta afastar o ponteiro da janela pop-up de cores aberta e clicar em qualquer cor na tela. 


A seção Cores do painel Ferramentas contém controles de cor de preenchimento e traço, além de 
outras opções de cor. A seção Bitmap contém as ferramentas Lata de tinta, Preenchimento dégradé 
e Conta-gotas, que são úteis para aplicar cor a seleções de bitmaps, áreas com cor semelhante e 
objetos vetoriais. Para informações sobre essas ferramentas de bitmap, consultar Capítulo 5, 
“Como trabalhar com um bitmap”, na página 125. 


Nota: Para informações sobre correção de cor com Efeitos ao vivo e filtros, consultar “Ajuste da cor e do tom de um 
bitmap” na página 138. 


Uso da seção Cores do painel Ferramentas 


A seção Cores do painel Ferramentas contém controles que ativam as caixas Cor do traço e Cor de 
preenchimento, as quais, por sua vez, determinam se as escolhas de cores afetam os traços ou 
preenchimentos de objetos selecionados. Além disso, a seção Cores possui controles que restauram 
rapidamente o padrão das cores, definem as configurações de cores de preenchimento e traço 
como Nenhum e trocam as cores de traços e preenchimentos. 


Para ativar a caixa Cor do traço ou Cor de preenchimento: 


Clicar no ícone ao lado da caixa Cor do traço ou Cor de preenchimento no painel Ferramentas. A 
área da caixa de cor ativa aparece como um botão pressionado no painel Ferramentas. 
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Nota: A ferramenta Lata de tinta preenche as seleções de pixels e os objetos vetoriais com a cor mostrada na caixa 
Cor de preenchimento no painel Ferramentas. 


[O s3333 Ae » 


Opções de preenchimento... 


Caixas de cores no painel Ferramentas e a janela pop-up de cores 


Para restaurar o padrão das cores: 
Clicar no botão Cores padrão no painel Ferramentas ou no Misturador de cores. 
Para remover o traço e o preenchimento dos objetos selecionados usando o botão Nenhum traço 
ou preenchimento: 
1 Clicar no botão Nenhum traço ou preenchimento na seção Cores do painel Ferramentas. 
O traço ou preenchimento da característica ativa ficará definido como Nenhum. 


2 Para definir a característica inativa também como Nenhum, clicar novamente no botão 
Nenhum traço ou preenchimento. 


Nota: Uma outra opção disponível é definir o preenchimento ou traço de objetos selecionados como Nenhum. Para 
fazer isso, basta clicar no botão Transparente em qualquer janela pop-up da caixa Cor de preenchimento ou Cor do 
traço, ou escolher Nenhum no menu pop-up Opções de preenchimento ou Opções de traço no Inspetor de 
propriedades. 


Para trocar cores de traço e preenchimento: 


Clicar no botão Trocar cores no painel Ferramentas ou no Misturador de cores. 


Organização de um grupo de exemplos e de um modelo de cor 


O painel Exemplos de cores e o Misturador de cores se combinam para formar o grupo de painéis 
Cores. O painel Exemplos de cores oferece opções para exibir, alterar, criar e editar grupos de 
exemplos, assim como para escolher cores de traço e de preenchimento. O Misturador de cores 
permite escolher um modelo de cor, misturar cores de traço e preenchimento arrastando-se os 
controles deslizantes de valor da cor ou digitando-se valores da cor, além de permitir a escolha de 
cores de traço e de preenchimento diretamente na barra de cores. 


Aplicação de uma cor através do painel Exemplos de cores 
O painel Exemplos de cores exibe todas as cores do grupo de exemplos atual. Uma de suas 
utilidades é aplicar cores de traço e de preenchimento a textos ou objetos vetoriais selecionados. 
Para aplicar uma cor ao traço ou preenchimento de um objeto selecionado através do painel 
Exemplos de cores: 


1 Clicar no ícone ao lado da caixa Cor do traço ou Cor de preenchimento no painel Ferramentas 
ou no Inspetor de propriedades para ativá-lo. 
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2 Seo painel Exemplos de cores ainda não estiver aberto, escolher Janela > Exemplos de cores. 


EJ 


l de cores Es 


Painel Exemplos de cores 


3 Clicar em um exemplo para aplicar a cor ao traço ou preenchimento do objeto selecionado. A 
cor aparece na caixa Cor do traço ou Cor de preenchimento ativa. 


Alteração de um grupo de exemplos 


É fácil alternar para outro grupo de exemplos ou criar um grupo próprio. O menu Opções do 
painel Exemplos de cores contém os seguintes grupos de exemplos: Cubos de cor, Tom contínuo, 
Sistema Macintosh, Sistema Windows e Tons de cinza. É possível importar exemplos 
personalizados de arquivos de paleta de cores como arquivos ACT ou GIF. 


Adicionar exemplos... 
Substituir exemplos... 
Limpar exemplos... 
Limpar exemplos 


Cubos de cor 

Tom contínuo 
Sistema Windows 
Sistema Macintosh 
Tons de cinza 


Classificar por cor 


Ajuda 
Renomear grupo de painel... 
Fechar grupo de painéis 


Menu Opções do painel Exemplos de cores 


Para escolher um grupo de exemplos: 
Escolher um grupo de exemplos no menu Opções do painel Exemplos de cores. 


Nota: A escolha de Cubos de cor retorna ao grupo de exemplos padrão. 


Para escolher um grupo de exemplos personalizados: 
1 Escolher Substituir exemplos no menu Opções do painel Exemplos de cores. 


2 Navegar até a pasta e escolher um arquivo de exemplo. 
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3 Clicar em Abrir. 
Os exemplos de cores do arquivo substituem os exemplos anteriores. 


Nota: Para informações sobre como criar um grupo de exemplos personalizados, consultar “Personalização do 
painel Exemplos de cores” na página 192 e “Como salvar uma paleta” na página 340. 


Para anexar exemplos de uma paleta de cores externa aos exemplos atuais: 
1 Escolher Adicionar exemplos no menu Opções do painel Exemplos de cores. 
2 Navegar até a pasta desejada e escolher um arquivo de paleta de cores. 
Nota: O Fireworks pode adicionar novos exemplos de paletas exportadas como arquivos ACT ou GIF. 
3 Clicar em OK. 


Os novos exemplos são anexados ao final dos exemplos atuais. 


Personalização do painel Exemplos de cores 


O painel Exemplos de cores oferece opções que adicionam, excluem, substituem e classificam 
exemplos de cores ou grupos de exemplos inteiros. 


Nota: Escolher Editar > Desfazer não desfaz adições nem exclusões de exemplos. 


EJ 


EE decores o 


Painel Exemplos de cores 


Para adicionar uma cor ao painel Exemplos de cores: 
1 Escolher a ferramenta Conta-gotas no painel Ferramentas. 


2 Escolher o número de pixels para amostragem no menu pop-up Exemplo do Inspetor de 
propriedades: 1 pixel, 3x3 média ou 5x5 média. 


3 Clicar em qualquer ponto na janela do documento do Fireworks aberta para fazer amostragem 
de uma cor. 


4 Mover a ponta do ponteiro conta-gotas para o espaço aberto após o último exemplo no painel 
Exemplos de cores. 


O ponteiro conta-gotas se transforma no ponteiro lata de tinta. 
5 Clicar para adicionar o exemplo. 
Dica: Quando a opção Alinhar pela cor Websafe estiver selecionada no menu Opções da janela pop-up de 


cores, qualquer cor Websafe selecionada com o ponteiro conta-gotas será alterada para a cor Websafe mais 
próxima. 


192 Capítulo 8 


Para substituir um exemplo por outra cor: 
1 Escolher a ferramenta Conta-gotas no painel Ferramentas. 


2 Escolher o número de pixels para o exemplo no menu pop-up Exemplo do Inspetor de 
propriedades: 1 pixel, 3x3 média ou 5x5 média. 


3 Clicar em qualquer ponto na janela do documento do Fireworks para fazer amostragem de 
uma cor. 


4 Manter pressionada a tecla Shift e colocar o ponteiro sobre um exemplo no painel Exemplos de 
cores. 


O ponteiro se transforma no ponteiro lata de tinta. 


5 Clicar no exemplo para substituí-lo pela nova cor. 


Para excluir um exemplo do painel Exemplos de cores: 


1 Manter pressionada a tecla Control (Windows) ou Command (Macintosh) e colocar o ponteiro 
sobre um exemplo. 


O ponteiro se transforma no ponteiro tesoura. 


2 Clicar no exemplo para excluí-lo do painel Exemplos de cores. 


Para salvar uma seleção de cores de exemplo: 

1 Adicionar as cores de exemplo ao painel Exemplos de cores. 

2 Escolher Salvar exemplos no menu Opções do painel Exemplos de cores. 
A caixa de diálogo Exportar exemplos é exibida. 


3 Escolher um nome de arquivo e diretório e clicar em Salvar. 


Limpeza e classificação de um exemplo 


O menu Opções do painel Exemplos de cores oferece a opção de limpar e classificar exemplos: 


Para limpar ou classificar exemplos: 
Escolher um dos seguintes itens no menu Opções do painel Exemplos de cores: 
Limpar exemplos limpa todo o painel Exemplos de cores. 


Classificar por cor classifica os exemplos por valor da cor. 


Criação de uma cor no Misturador de cores 


O Misturador de cores permite criar cores arrastando-se os controles deslizantes ou digitando-se 
valores para cada componente de um modelo de cor, como RGB, Hexadecimal ou CMY. A cor 
criada é aplicada à caixa Cor do traço ou Cor de preenchimento ativa. O Misturador de cores 
também possui uma barra de cores que exibe a faixa de cores do modelo de cor atual. Para aplicar 
uma cor, clicar em qualquer ponto na barra de cores. Outra opção é clicar no botão selecionador 
de cores do sistema para escolher uma cor do sistema Windows ou Macintosh. 


Dica: Ainda que CMY seja uma opção de modelo de cor, gráficos exportados diretamente do Fireworks não são 
ideais para impressão. Para readaptar os gráficos exportados do Fireworks para impressão, uma possibilidade é 
importá-los para o FreeHand MX, que executará automaticamente a conversão das imagens RGB em CMYK ao 
gerar separações de cores digitais. Para mais informações, consultar a documentação do FreeHand MX. 
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Mistura de uma cor no Misturador de cores 


O Misturador de cores oferece opções para exibir os valores da cor ativa e editar valores da cor a 
fim de criar novas cores. 


Por padrão, o Misturador de cores identifica as cores RGB como hexadecimais, exibindo os 
valores dos componentes vermelho (R), verde (G) e azul (B) da cor. Os valores RGB hexadecimais 
são calculados com base em uma faixa de 00 a FE 


Escolher Para expressar componentes de cor como 


RGB Valores de Vermelho, Verde e Azul, onde cada componente tem um valor de O a 255. 0-0-0 é 
preto e 255-255-255 é branco. 


Hexadecimal Valores RGB de Vermelho, Verde e Azul, onde cada componente tem um valor hexadecimal de 
OO a FF. 00-00-00 é preto e FF-FF-FF é branco. 


HSB Valores de Matiz, Saturação e Brilho, onde Matiz tem um valor de O a 360 graus, e Saturação e 
Brilho têm valores que variam de O a 100%. 


CMY Valores de Ciano, Magenta e Amarelo, onde cada componente tem um valor de O a 255. 0-0-0 
é branco e 255-255-255 é preto. 


Tons de cinza Porcentagem de preto. O valor do componente simples Preto (K) varia de O a 100%, onde O é 
branco e 100 é preto. Os valores intermediários correspondem a tons de cinza. 


O menu Opções do Misturador de cores oferece modelos de cor alternativos à sua escolha. Os 
valores dos componentes da cor atual mudam para cada novo modelo de cor. 
Para exibir o Misturador de cores: 


Escolher Janela > Misturador de cores. 


Para aplicar uma cor da barra de cores a um objeto vetorial selecionado: 


1 Clicar no ícone ao lado da caixa Cor do traço ou Cor de preenchimento no Misturador de 
cores. 


2 Mover o ponteiro sobre a barra de cores. 
O ponteiro se transforma no ponteiro conta-gotas. 
3 Clicar para selecionar uma cor. 


A cor é aplicada ao objeto selecionado e se torna a cor ativa de traço ou preenchimento. 
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Para selecionar uma cor no Misturador de cores: 


1 Cancelar a seleção de todos os objetos antes de misturar uma cor, para evitar a edição 
indesejada de um objeto durante a mistura de cores. 


Clicar na caixa Cor do traço ou Cor de preenchimento para torná-la o destino da nova cor. 


Escolher um modelo de cor no menu Opções do Misturador de cores. 


Aa O N 


Seguir um destes procedimentos para especificar valores de componentes de cor: 

e Digitar valores nas caixas de texto de componentes de cor. 

e Usar os controles deslizantes pop-up. 

e Selecionar uma cor na barra de cores. 

A adição da cor ao painel Exemplos de cores possibilita a sua reutilização. Para mais informações, 
consultar “Personalização do painel Exemplos de cores” na página 192. 

Para alternar a barra de cores entre os modelos de cor: 

Manter pressionada a tecla Shift e clicar na barra de cores na parte inferior do Misturador de cores. 


Nota: As opções do Misturador de cores não se alteram. 


Criação de uma cor com os selecionadores de cores do sistema 
Em vez de usar o Misturador de cores e o painel Exemplos de cores para criar cores, existe a 
alternativa de utilizar a caixa de diálogo Sistema Windows ou Sistema Macintosh. 
Para selecionar uma cor do selecionador de cores do sistema: 
1 Clicar em qualquer caixa de cor. 
2 Escolher Windows OS ou Mac OS no menu Opções de qualquer janela pop-up de cores. 
A janela pop-up exibe os exemplos de cores do sistema. 
3 Escolher uma cor do selecionador de cores do sistema. 
A cor se torna a nova cor de traço ou preenchimento. 
Para informações sobre como adicionar uma cor do selecionador de cores ao painel Exemplos de 
cores, consultar “Personalização do painel Exemplos de cores” na página 192. 
Exibição de um valor da cor 
Além do Misturador de cores e da janela pop-up de cores, também é possível identificar valores da 
cor através do painel Informações. 
Para exibir o valor da cor de qualquer parte do documento usando o painel Informações: 
1 Escolher Janela > Informações, para exibir o painel Informações. 


2 Mover o ponteiro sobre o objeto que contém a cor que deseja exibir (somente Windows). 


Para exibir o valor da cor de preenchimento ou traço ativa, seguir um destes procedimentos: 
* Escolher Janela > Misturador de cores para RGB ou outros valores do sistema de cores. 


e Clicar em uma caixa de cor para abrir a janela pop-up de cores e exibir o valor hexadecimal na 
parte superior da janela. 
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e Colocar o ponteiro sobre uma caixa de cor e ler a dica de ferramenta (somente Windows). 


Nota: Por padrão, os valores RGB da cor aparecem no painel Informações e no Misturador de cores, e seu valor 
hexadecimal aparece na janela pop-up de cores, assim como a dica de ferramenta da caixa de cor, no Windows. 
No entanto, é possível alterar o modelo de cor exibido no Misturador de cores ou no painel Informações a 
qualquer momento. 


Para exibir informações de cores de um modelo de cor alternativo: 


Escolher um outro modelo de cor no menu Opções do painel Informações ou do Misturador de cores. 


Pontilhamento com uma cor Websafe 


Às vezes, pode ser necessário usar uma cor que não é uma cor Websafe. Por exemplo, o logotipo da 
sua empresa pode utilizar uma cor que não é Websafe. Para criar a aparência de uma cor Websafe 
que não será trocada nem pontilhada quando for exportada com uma paleta Websafe, usa-se um 
preenchimento Pontilhamento Web. 


Nota: O pontilhamento Web pode aumentar o tamanho do arquivo. 


Cor da origem: E 


Fi Transparente 


Opções de preenchimento... 


Duas cores Websafe criam um preenchimento Pontilhamento Web. 


Para usar o preenchimento Pontilhamento Web: 
1 Selecionar um objeto que contenha uma cor não-Websafe. 


2 Escolher Pontilhamento Web no menu pop-up Opções de preenchimento no Inspetor de 
propriedades. 


3 Clicar na caixa Cor de preenchimento no Inspetor de propriedades. 


A janela pop-up de cores abre, exibindo opções de preenchimentos Pontilhamento Web. A cor 
não-Websafe do objeto aparece na caixa Cor da origem na janela Opções de preenchimento. As 
duas cores de pontilhamento Websafe aparecem nas caixas de cores à direita. O pontilhamento 
Web aparece no objeto e se torna a cor de preenchimento ativa. 


Nota: Definir a borda de um preenchimento Pontilhamento Web como Suavização de serrilhado ou Enevoar 
resulta em cores que não são Websafe. 


4 Clicar fora da janela pop-up para fechá-la. 


Para criar a ilusão de um verdadeiro preenchimento transparente em um navegador da Web: 
1 Selecionar o objeto ao qual deseja aplicar um preenchimento transparente. 


2 Escolher Pontilhamento Web no menu pop-up Opções de preenchimento no Inspetor de 
propriedades. 


3 Clicar na caixa Cor de preenchimento no Inspetor de propriedades. A janela pop-up de cores 
abre, exibindo opções de preenchimentos Pontilhamento Web. 
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4 Clicar na opção Transparente. 


As caixas de cores no lado direito da janela pop-up mudam para refletir a seleção, e o objeto na 
tela se torna semi-opaco ou translúcido. 


5 Clicar fora da janela pop-up para fechá-la. 


6 Exportar o objeto como GIF ou PNG com a opção Transparência do índice ou Transparência 
alfa definida. Para mais informações sobre como exportar arquivos com transparência, 
consultar “Como tornar áreas transparentes” na página 341. 


Quando o gráfico for exibido em um navegador da Web, o fundo da página da Web mostrará 
todos os pixels do preenchimento Pontilhamento Web transparente, criando o aspecto de 
transparência. 


Nota: Nem todos os navegadores oferecem suporte a arquivos PNG. 


Uso de uma caixa de cor e janela pop-up de cores 


Há caixas de cores em todo o Fireworks MX — da seção Cores do painel Ferramentas até o 
Inspetor de propriedades e o Misturador de cores. Cada uma exibe a cor atual atribuída à 
propriedade do objeto associado. 


Escolha de uma cor em uma janela pop-up de cores 
Um clique em qualquer caixa de cor abre uma janela pop-up de cores semelhante ao painel 
Exemplos de cores. São oferecidas duas opções: exibir, em uma janela pop-up de cores, os mesmos 
exemplos exibidos no painel Exemplos de cores ou exibir exemplos diferentes. 
Para escolher uma cor para uma caixa de cor: 
1 Clicar na caixa de cor. 
A janela pop-up de cores é exibida. 
2 Seguir um destes procedimentos: 
e Clicar em um exemplo para aplicá-lo à caixa de cor. 
e Clicar o ponteiro conta-gotas em uma cor na tela para aplicá-la à caixa de cor. 


e Clicar no botão Transparente para tornar transparente o traço ou preenchimento. 


Para exibir o grupo de exemplos atuais do painel Exemplos de cores na janela pop-up de cores: 


Escolher Painel de exemplos no menu Opções da janela pop-up de cores. 


Para exibir um outro grupo de exemplos na janela pop-up de cores: 


Escolher um grupo de exemplos no menu Opções da janela pop-up de cores. A escolha de um 
grupo de exemplos aqui não afeta o painel Exemplos de cores. 
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Amostragem de uma cor em uma janela pop-up de cores 


Quando uma janela pop-up de cores estiver aberta, o ponteiro se transformará em um conta-gotas 
especial que pode fazer amostragem de cores de praticamente qualquer parte da tela. Isso é 
conhecido como amostragem. 
Para fazer amostragem de uma cor de qualquer parte da tela para a caixa de cor atual: 
1 Clicar em qualquer caixa de cor. 

A janela pop-up de cores é exibida e o ponteiro se transforma em um conta-gotas. 


2 Clicar em qualquer ponto no espaço de trabalho do Fireworks a fim de escolher uma cor para a 
caixa de cor. 


A cor é aplicada à característica ou ao recurso associado à caixa de cor e a janela pop-up de cores 


fecha. 


Dica: Manter pressionada a tecla Shift e clicar para escolher uma cor Websafe. 


Como trabalhar com um traço 


O Inspetor de propriedades, o menu pop-up Opções de traço e a caixa de diálogo Editar traço 
proporcionam controle total sobre todas as nuanças do pincel, inclusive a quantidade de tinta, o 
tamanho e a forma da ponta, a textura, o efeito de borda e o aspecto. 


Aplicação de um traço 


O usuário pode alterar os atributos de traço das ferramentas Caneta, Lápis e Pincel para que o 
próximo objeto vetorial que desenhar apresente os novos atributos, ou ele pode aplicar atributos 
de traço a um objeto ou traçado depois de desenhá-lo. 


A cor atual do traço aparece na caixa Cor do traço no painel Ferramentas, no Inspetor de 
propriedades e no Misturador de cores. É possível alterar a cor do traço de uma ferramenta de 
desenho ou do objeto selecionado em qualquer um desses três painéis. 


O ícone do lápis indica a caixa Cor do traço no painel Ferramentas, no Inspetor de propriedades e no 
Misturador de cores. 


Para alterar atributos do traço de objetos selecionados, seguir um destes procedimentos: 


* Escolher um dos atributos de traço no Inspetor de propriedades. 


Dica: Escolher Opções de traço no menu pop-up Opções de traço para obter mais atributos. 
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e Clicar na caixa Cor do traço no painel Ferramentas e clicar em Opções de traço. Escolher um 
dos atributos de traço na janela pop-up Opções detraço. 


Lápis 
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Usar as opções do Inspetor de propriedades ou da janela pop-up Opções de traço para alterar o traço 
aplicado a um objeto. 


Para alterar a cor do traço de uma ferramenta de desenho: 


1 Pressionar Control+D (Windows) ou Command+D (Macintosh) para cancelar a seleção de 
todos os objetos. 


2 Escolher uma ferramenta de desenho no painel Ferramentas. 


3 Clicar na caixa Cor do traço no painel Ferramentas ou no Inspetor de propriedades para abrir a 
janela pop-up de cores. 


4 Escolher uma cor para o traço no conjunto de exemplos. 
5 Arrastar para desenhar o objeto. 
Nota: Um traço recém-criado assume a cor exibida no momento na caixa Cor do traço. 
Para remover todos os atributos de traço de um objeto selecionado, seguir um destes 
procedimentos: 


* Escolher Nenhum no menu pop-up Opções de traço do Inspetor de propriedades ou da janela 
pop-up Opções de traço. 


e Clicar na caixa Cor do traço no painel Ferramentas ou no Inspetor de propriedades e clicar no 
botão Transparente. 
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Criação de um traço personalizado 


A caixa de diálogo Editar traço oferece a opção de alterar características específicas do traço. 


Editar traço 


Opções | Forma | Sensibilidade 


Quantidade de tinta: 
Espaçamento: 


Taxa de fluxo: [0 


Textura: 


Textura da borda: (0% 


Efeito de borda: | Nenhum 


Pontas: [1 


Espaçamento da ponta: 


Variação: 


— 


Essa caixa de diálogo tem três guias: Opções, Forma e Sensibilidade. 

A visualização do traço, na parte inferior de cada guia, mostra o pincel atual com as configurações 
atuais. Um traço na visualização que se estreite, desapareça ou altere-se de qualquer outra forma, 
da esquerda para a direita, ilustra as configurações atuais de sensibilidade à pressão e à velocidade. 
Para abrir a caixa de diálogo Editar traço: 

1 Seguir um destes procedimentos para abrir a janela pop-up Opções de traço: 

* Escolher Opções de traço no menu pop-up Opções de traço do Inspetor de propriedades. 

è Escolher Opções de traço na janela pop-up da caixa Cor do traço no painel Ferramentas. 

2 Clicar em Avançado. 


A caixa de diálogo Editar traço é exibida. 
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Para definir opções gerais do traço de pincel: 


1 Na guia Opções da caixa de diálogo Editar traço, definir a quantidade de tinta, o espaçamento 
e a taxa de fluxo. Taxas de fluxo mais altas criam traços de pincel que flutuam ao longo do 
tempo, como com um aerógrafo. 


Editar traço 


Opções | Forma | Sensibilidade 


Quantidade de tinta: 100% v 
Espaçamento: [ 
Taxa de fluxo: [0 

[4] Montar 

Textura: 


Textura da borda: | 


Efeito de borda: | Nenhum 


Pontas: |1 
Espaçamento da ponta: | 


Variação: 


2 Para sobrepor carimbos de traços de pincel densos, escolher Montar. 


3 Para definir a textura do traço, alterar a opção Textura. Quanto mais alto o número, mais 
aparente ficará a textura. 


4 Para definir a textura nas bordas, digitar um número na caixa de texto Textura da borda e 
escolher um efeito de borda no menu pop-up Efeito da borda. 


5 Definir o número de pontas que deseja que o traço de pincel tenha. Para várias pontas, digitar 
um valor de espaçamento da ponta e escolher o método de variação da cor. Estas são as opções 
à sua escolha: Aleatória, Uniforme, Complementar, Matiz ou Sombra. 


6 Clicar em Aplicar para aplicar as configurações a traços selecionados e, em seguida, clicar em OK. 
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Para modificar a ponta do pincel: 


1 Na guia Forma da caixa de diálogo Editar traço, selecionar Quadrado para uma ponta 
quadrada ou, para uma ponta redonda, cancelar a seleção de Quadrado. 


Editar traço 


| Opções | Forma | Sensibilidade | | 


C Quadrado 

Tamanho: 

Borda: 
Aspecto: —— 100 | 


ângulo: | 360 


— 


DK Cancelar Aplicar 
[oo )( canceir )[ picar ] 


2 Digitar valores para o tamanho da ponta do pincel, a suavidade da borda, o aspecto da ponta e 
o ângulo da ponta. 


3 Clicar em Aplicar e, em seguida, em OK. 


O Fireworks possui configurações de traço para fazer o ajuste fino dos atributos de traço 
controlados por velocidade e pressão quando for utilizada uma caneta ou uma mesa digitalizadora 
Wacom sensível à pressão. É possível escolher o atributo de traço a ser controlado com a caneta. 
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Para definir a sensibilidade do traço: 


1 Na guia Sensibilidade da caixa de diálogo Editar traço, escolher uma propriedade de traço 
como Tamanho, Quantidade de tinta ou Saturação no menu pop-up Propriedade do traço. 


Editar traço 


Opções | Forma | Sensibilidade 


| Propriedade do traço: 


| 
Tamanho v | 


Afetado por: 


Pressão: 


Velocidade: 


Horizontal: 


Vertical: 


Aleatória: 


2 Nas opções Afetado por, escolher até que ponto os dados da sensibilidade afetam a propriedade 
do traço atual. 


3 Clicar em OK. 


Posicionamento de um traço em traçados 


Por padrão, o traço de pincel de um objeto é centralizado no traçado. É possível alterar as opções 
para posicionar o traço de pincel inteiramente dentro ou fora do traçado. Isso permite que o 
usuário controle o tamanho geral de objetos com traços, além de lhe permitir criar efeitos como, 
por exemplo, usar traços nas bordas de botões chanfrados. 


IRLI 


Traço centralizado, traço interno e traço externo 


O menu pop-up Traço da janela Opções de traço oferece a opção de reorientar os traços de pincel. 
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Para mover um traço de pincel dentro ou fora do traçado selecionado: 


1 Clicar na caixa Cor do traço no painel Ferramentas ou no Inspetor de propriedades para abrir a 
janela pop-up da caixa de cor. 


2 Escolher uma opção do menu pop-up Localização do traço em relação ao traçado: Dentro, 
Centralizado ou Fora. 


3 Opcionalmente, escolher a opção Preencher sobre traço. 


Normalmente, o traço sobrepõe o preenchimento. Escolher Preencher sobre traço desenha o 
preenchimento sobre o traço. A escolha dessa opção para um objeto com preenchimento opaco 
faz com que qualquer parte do traço que cair dentro do traçado fique obscurecida. Um 
preenchimento com um grau de transparência pode ser tingido ou misturado com traços do 
pincel dentro do traçado. 


Criação de um estilo de traço 


É possível alterar características específicas de traço, como quantidade de tinta, forma da ponta e 
sensibilidade da ponta, e salvar o traço personalizado como um estilo para reutilizar em vários 
documentos. 


Para criar traços personalizados: 

1 Seguir um destes procedimentos: 

e Clicar na caixa Cor do traço no painel Ferramentas e clicar em Opções de traço. 

* Escolher Opções de traço no menu pop-up Opções de traço do Inspetor de propriedades. 
A janela pop-up Opções de traço é exibida. 

2 Editar os atributos de traço de pincel desejados. 


Salvar os atributos de traço personalizados como um estilo. Para mais informações, consultar 
“Criação e exclusão de um estilo” na página 250. 


Como trabalhar com um preenchimento 


O Inspetor de propriedades, o menu pop-up Opções de preenchimento, a janela pop-up Opções 
de preenchimento e a janela pop-up Dégradé, assim como um conjunto de padrões e texturas de 
bitmap, possibilitam a criação de uma ampla variedade de preenchimentos para texto e objetos 
vetoriais. Com a ferramenta Dégradé ou Lata de tinta, também é possível preencher seleções de 
pixels com base nas configurações de preenchimento atuais. 


Definição de um atributo de preenchimento das ferramentas de desenho 


O usuário pode definir os atributos de preenchimento das ferramentas de desenho Retângulo, 
Retângulo arredondado, Elipse e Polígono que serão aplicados aos próximos objetos que desenhar. 
O preenchimento atual aparece na caixa Cor de preenchimento no painel Ferramentas, no 
Inspetor de propriedades e no Misturador de cores. É possível utilizar qualquer um desses painéis 
para alterar o preenchimento de uma ferramenta de desenho. 


O ícone da lata de tinta indica a caixa Cor de preenchimento no painel Ferramentas, no Inspetor de 
propriedades e no Misturador de cores. 
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Para alterar a cor de preenchimento sólido das ferramentas de desenho de vetor aplicáveis e da 
ferramenta Lata de tinta: 


1 Escolher uma ferramenta de desenho de vetor ou a ferramenta Lata de tinta. 
2 Seguir um destes procedimentos: 


è Pressionar Control+D (Windows) ou Command+D (Macintosh) para cancelar a seleção de 
todos os objetos e clicar na caixa Cor de preenchimento no Inspetor de propriedades, para abrir 
a janela pop-up Cor de preenchimento. 


3 Clicar na caixa Cor de preenchimento no painel Ferramentas ou no Misturador de cores para 
abrir a janela pop-up de cores. 


4 Escolher uma cor para o preenchimento no conjunto de exemplos, ou usar o ponteiro conta- 
gotas para fazer amostragem de uma cor de qualquer parte da tela. 


5 Usar a ferramenta da forma desejada. 
Nota: A escolha da ferramenta Texto sempre faz com que a caixa Cor de preenchimento reverta para aúltima cor de 
texto sólida usada por essa ferramenta. 
Edição de um preenchimento sólido 


Um preenchimento sólido é uma cor sólida que preenche o interior de um objeto. O painel 
Ferramentas, o Inspetor de propriedades e o Misturador de cores oferecem a opção de alterar a cor 
de preenchimento de um objeto. 


Para editar o preenchimento sólido de um objeto vetorial selecionado no Inspetor de 
propriedades: 


1 Clicar na caixa Cor de preenchimento no painel Ferramentas, no Inspetor de propriedades ou 
no Misturador de cores, para abrir a janela pop-up de cores. 


2 Escolher um exemplo na janela pop-up de cores. 


O preenchimento aparece no objeto selecionado e se torna a cor de preenchimento ativa. 


Aplicação de um preenchimento dégradé ou com padrão 


O usuário pode alterar preenchimentos para exibir uma variedade de características sólidas, 
pontilhadas, dégradé ou com padrão, desde cores sólidas até dégradés que se assemelham a 
acetinado, ondulações ou dobras. Além disso, existe a possibilidade de alterar vários atributos de 
um preenchimento, como cor, borda, textura e transparência. 


Há uma ampla gama de preenchimentos dégradé e com padrão predefinidos à sua escolha; existe 
também a opção de criar um preenchimento personalizado. 


Nota: Um preenchimento recém-criado assume a cor atual exibida na caixa Cor de preenchimento no painel Ferramentas. 


| Sólido vi 


x 


Borda: | Suavização de serrilhad v| 


Textura: | Aniagem v fox x 


As opções de preenchimento do Inspetor de propriedades ou da janela pop-up Opções de preenchimento 
permitem editar os atributos de preenchimento. 
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Aplicação de um preenchimento com padrão 


É possível preencher um objeto de traçado com um gráfico de bitmap, conhecido como 
preenchimento como preenchimento com padrão. O Fireworks oferece mais de uma dezena de 
preenchimentos com padrão, incluindo Capacho Berbere, Folhas e Madeira. 


Para aplicar um preenchimento com padrão a um objeto selecionado: 
1 Seguir um destes procedimentos: 
* Escolher Padrão no menu pop-up Opções de preenchimento no Inspetor de propriedades. 


e Clicar na caixa Cor de preenchimento no painel Ferramentas, clicar em Opções de 
preenchimento e escolher Padrão no menu pop-up Opções de preenchimento. 


2 Escolher um padrão no menu pop-up Nome padronizado. 


O preenchimento com padrão aparece no objeto selecionado e se torna a cor de preenchimento 
ativa. 


Adição de um padrão personalizado 


É possível definir um arquivo de bitmap como um novo preenchimento com padrão. Estes são os 
formatos de arquivo que podem ser usados como padrões: PNG, GIF JPEG, BMB TIFF e PICT 
(apenas Macintosh). Quando um preenchimento com padrão for uma imagem transparente de 
32 bits, a transparência afetará o preenchimento no Fireworks. Se uma imagem não tiver 32 bits, 
ela será opaca. 


Quando um novo padrão é adicionado, seu nome aparece no menu pop-up Nome padronizado 
da janela pop-up Opções de preenchimento. 
Para criar um novo padrão a partir de um arquivo externo: 


1 Com as propriedades do objeto vetorial exibidas no Inspetor de propriedades, escolher Padrão 
no menu pop-up Opções de preenchimento. 


2 Clicar na caixa Cor de preenchimento e escolher Outro no menu pop-up Nome padronizado. 
3 Navegar até o arquivo de bitmap que deseja usar como o novo padrão e clicar em Abrir. 


O novo padrão é adicionado à parte inferior da lista Nome padronizado. 
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Aplicação de um preenchimento dégradé 


As categorias de preenchimento, além de Nenhum, Sólido, Padrão e Pontilhamento Web, são 
preenchimentos dégradé. Esses preenchimentos misturam cores para criar vários efeitos. 


IM 
Eq a: 
E 


Objetos com vários preenchimentos dégradé 


Para aplicar um preenchimento dégradé a um objeto selecionado: 


Escolher um dégradé no menu pop-up Opções de preenchimento no Inspetor de propriedades. O 
preenchimento aparece no objeto selecionado e se torna o preenchimento ativo. 


Edição de um preenchimento dégradé 


Para editar o preenchimento dégradé atual, clicar em qualquer caixa Cor de preenchimento e usar 
a janela pop-up Editar dégradé. 


Inclinação da cor 


Visualizar 


Opções de preenchimento... 


Janela pop-up Editar dégradé 


Para abrir a janela pop-up Editar dégradé: 


1 Selecionar um objeto com um preenchimento dégradé ou escolher um preenchimento dégradé 
no menu pop-up Opções de preenchimento no Inspetor de propriedades. 


2 Clicar na caixa Cor de preenchimento no painel Ferramentas ou no Inspetor de propriedades 
para abrir a janela pop-up. 


A janela pop-up Editar dégradé é aberta com o dégradé atual na visualização e na inclinação da cor. 
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Para adicionar um novo exemplo de opacidade ou cor, seguir um destes procedimentos: 
* Para adicionar um exemplo de cor, clicar na área abaixo da inclinação da cor dégradé. 


* Para adicionar um exemplo de opacidade, clicar na área acima da inclinação da cor dégradé. 


Para remover um exemplo de opacidade ou cor do dégradé: 


Arrastar o exemplo para longe da janela pop-up Editar dégradé. 


Para definir ou alterar a cor de um exemplo de cor: 
1 Clicar no exemplo de cor. 


2 Escolher uma cor na janela pop-up. 


Para definir ou alterar a transparência de um exemplo de opacidade: 
1 Clicar no exemplo de opacidade. 
2 Seguir um destes procedimentos: 


e Arrastar o controle deslizante até a porcentagem de transparência, onde 0 é totalmente 
transparente e 100 é totalmente opaco. 


e Digitar um valor numérico de 1 a 100 para definir a opacidade. 
Nota: O quadriculado de transparência mostra o dégradé em áreas transparentes. 


3 Quando terminar de editar o dégradé, pressionar Enter ou clicar fora da janela pop-up Editar 
dégradé. O preenchimento dégradé aparece em quaisquer objetos selecionados e se torna o 
preenchimento ativo. 


Para ajustar a transição entre as cores no preenchimento: 


Arrastar exemplos de cores para a esquerda ou para a direita. 


Criação de um preenchimento com a ferramenta Dégradé 


A ferramenta Dégradé se encontra no mesmo grupo da ferramenta Lata de tinta. Essa nova 
ferramenta funciona de forma semelhante à ferramenta Lata de tinta, mas preenche um objeto 
com um dégradé e não com uma cor sólida. Da mesma maneira que a ferramenta Lata de tinta, 
ela conserva as propriedades do último dégradé utilizado. 


Para usar a ferramenta Dégradé: 

1 Clicar na ferramenta Lata de tinta no painel Ferramentas e escolher a ferramenta Dégradé no menu 
pop-up. 

2 Escolher um dos atributos a seguir no Inspetor de propriedades: 


Opções de preenchimento é um menu pop-up no qual é possível escolher um tipo de dégradé. 


A caixa Cor do preenchimento, quando clicada, exibe a janela pop-up Editar dégradé, na qual é 
o pree q ibe a j g q 
possível definir várias opções de cor e transparência. 


Borda determina se o dégradé tem uma borda de preenchimento enevoada, sem serrilhado ou 
acentuada. A escolha de uma borda enevoada permite que se determine a quantidade de 
enevoamento. 


Textura oferece várias opções à sua escolha, inclusive Grão, Metal, Linha diagonal, Malha ou Lixa. 
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3 Clicar e arrastar o ponteiro para estabelecer o ponto de partida do dégradé, assim como a 
direção e o comprimento da área dégradé. 


Transformação e distorção de um preenchimento 


É possível mover, girar, inclinar e alterar a largura do preenchimento dégradé ou com padrão de 
um objeto. A seleção de um objeto com um preenchimento dégradé ou com padrão usando as 
ferramentas Ponteiro ou Dégradé faz com que seja exibido um conjunto de alças no objeto ou 
próximas a ele. Para ajustar o preenchimento do objeto, arrastar essas alças. 


Usar as alças de preenchimento para ajustar interativamente um preenchimento dégradé ou com padrão. 


Para mover o preenchimento dentro de um objeto: 

Arrastar a alça redonda ou clicar em um outro local dentro do preenchimento usando a 
ferramenta Dégradé. 

Para girar o preenchimento: 


Arrastar as linhas que conectam as alças. 


Para ajustar a largura e a inclinação do preenchimento: 


Arrastar uma alça quadrada. 


Definição de uma borda de preenchimento acentuada, enevoada ou sem 
serrilhado 


O Fireworks permite definir a borda de um preenchimento como uma linha acentuada regular ou 
suavizá-la através dos recursos Suavização de serrilhado ou Enevoar. Por padrão, as bordas 
apresentam serrilhados suavizados. A suavização de serrilhado suaviza bordas irregulares que 
podem ocorrer em objetos arredondados, como elipses e círculos, através de uma mistura sutil da 
borda com o fundo. 


No entanto, o enevoamento cria uma mistura perceptível nos dois lados da borda. Isso confere à 
borda um efeito suavizado — quase um brilho. 

Para alterar a borda de um objeto selecionado: 

1 Seguir um destes procedimentos para exibir o menu pop-up Borda: 

e Clicar no menu pop-up Borda no Inspetor de propriedades. 


e No painel Ferramentas, clicar na caixa Cor de preenchimento, clicar em Opções de 
preenchimento e, em seguida, clicar no menu pop-up Borda. 


2 Escolher uma opção de borda: Borda acentuada, Suavização de serrilhado ou Enevoar. 


3 Para uma borda enevoada, escolher também o número de pixels a serem enevoados em cada 


lado da borda. 
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O padrão é 10. A escolha varia de 0 a 100. Quanto mais alto o nível, maior será o enevoamento. 


Sobre como salvar um preenchimento dégradé personalizado 


Para salvar as configurações de dégradé atuais como um dégradé personalizado para usar em vários 
documentos, é necessário criar um estilo. Para mais informações, consultar “Criação e exclusão de 
um estilo” na página 250. 


Remoção de um preenchimento 


É simples remover atributos de preenchimento de objetos selecionados. 


Para remover o preenchimento de um objeto selecionado, seguir um destes procedimentos: 


* Escolher Nenhum no menu pop-up Opções de preenchimento do Inspetor de propriedades ou 
da janela pop-up Opções de preenchimento. 


e Clicar em qualquer caixa Cor de preenchimento e clicar no botão Transparente. Essa opção 
remove somente preenchimentos sólidos. 


Adição de textura a traços e preenchimentos 


É possível adicionar efeitos tridimensionais tanto a traços quanto a preenchimentos através da adição 
de textura. O Fireworks oferece várias texturas, mas também permite o uso de texturas externas. 


Adição de textura a um traço 


As texturas modificam o brilho do traço, mas não o matiz, e conferem aos traços uma aparência 
menos mecânica e mais orgânica, como se o usuário estivesse passando tinta em uma superfície 
texturizada. As texturas são mais eficazes quando usadas com traços largos. É possível adicionar 
uma textura a qualquer traço. O Fireworks oferece várias texturas à escolha, como Chiffon, 
Mancha de óleo e Lixa. 


so 


Usar as opções de traço do Inspetor de propriedades ou da janela pop-up Opções de traço para adicionar 
uma textura a um traço depincel, 


O menu pop-up Textura exibe uma visualização da textura realçada. 
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Para adicionar textura ao traço de um objeto selecionado: 


1 


Seguir um destes procedimentos para abrir o menu pop-up Textura do traço: 
Clicar no menu pop-up Textura do traço no Inspetor de propriedades. 


No painel Ferramentas, clicar na caixa Cor do traço, clicar em Opções de traço e, em seguida, 
clicar no menu pop-up Textura. 


Seguir um destes procedimentos: 
Escolher uma textura no menu pop-up. 


Para usar uma textura externa, escolher Outra no menu pop-up e navegar até um arquivo de 
textura. 


Nota: Estes são os formatos de arquivo que podem ser usados como texturas: PNG, GIF, JPEG, BMP, TIFF e 
PICT (apenas Macintosh). 


Digitar uma porcentagem de 0 a 100 para controlar a profundidade da textura. 


Aumentar a porcentagem aumenta a intensidade da textura. 


Adição de textura a um preenchimento 


As texturas modificam o brilho de um preenchimento, mas não o matiz, e conferem aos 
preenchimentos uma aparência menos mecânica e mais orgânica. E possível adicionar uma textura 
a qualquer preenchimento. O Fireworks oferece várias texturas à sua escolha, como Chiffon, 
Mancha de óleo e Lixa, mas também permite o uso de arquivos de bitmap como texturas. Isso 
permite criar praticamente qualquer tipo de textura personalizada. 


Para adicionar textura ao preenchimento de um objeto selecionado: 


1 


Seguir um destes procedimentos para abrir o menu pop-up Textura do preenchimento: 
Clicar no menu pop-up Textura do preenchimento no Inspetor de propriedades. 


No painel Ferramentas, clicar na caixa Cor de preenchimento, clicar em Opções de 
preenchimento e, em seguida, clicar no menu pop-up Textura. 


Seguir um destes procedimentos: 
Escolher uma textura no menu pop-up. 


Para usar uma textura externa, escolher Outra no menu pop-up e navegar até um arquivo de 
textura. 


Digitar uma porcentagem de 0 a 100 para controlar a profundidade da textura. 
Aumentar a porcentagem aumenta a intensidade da textura. 
Escolher Transparente para introduzir um nível de transparência no preenchimento. 


A porcentagem de textura também controla o grau de transparência. 


Adição de uma textura personalizada 


Existe a opção de usar arquivos de bitmap do Fireworks e de outros aplicativos como texturas. 
Estes são os formatos de arquivo que podem ser usados como texturas: PNG, GIF, JPEG, BMP, 
TIFF e PICT (apenas Macintosh). 


Quando uma nova textura é adicionada, seu nome aparece no menu pop-up Nome da textura. 
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Para criar uma nova textura a partir de um arquivo externo: 


1 Com as propriedades do objeto vetorial exibidas no Inspetor de propriedades, escolher Outra 
em qualquer um dos menus pop-up Nome da textura. 


2 Navegar até o arquivo de bitmap que deseja usar como a nova textura e clicar em Abrir. 


A nova textura é adicionada à parte inferior da lista Nome da textura. 
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CAPÍTULO 9 
Uso de Efeitos ao vivo 


Efeitos ao vivo do Macromedia Fireworks MX são melhorias que podem ser aplicadas aos objetos 
vetoriais, imagens bitmap e texto. Chanfros e relevo, sombras e brilhos, correção de cor, e 
desfoque e grau de desfoque são alguns Efeitos ao vivo. É possível aplicar Efeitos ao vivo aos 
objetos selecionados diretamente no Inspetor de propriedades. 


Os efeitos ao vivo são atualizados automaticamente quando se edita qualquer objeto em que 
tenham sido aplicados. Depois de aplicado o Efeito ao vivo, é possível alterar suas opções a 
qualquer momento, ou reorganizar a sua ordem para testar a combinação com outros efeitos. No 
Inspetor de propriedades é possível ativar ou desativar, ou excluir os Efeitos ao vivo. Quando um 
efeito é removido, o objeto ou a imagem volta a ter a aparência anterior. 


Alguns efeitos agora incluídos nos Efeitos ao vivo do Fireworks — tais como, Níveis automáticos, 
Desfoque Gaussiano e Desfocar máscara — já estiveram disponíveis somente como plug-ins ou 
filtros irreversíveis. Além desses efeitos, é possível adicionar plug-ins de outros fornecedores para 
usar como Efeitos ao vivo no Fireworks. Se preferir, poderá usar esses filtros no modo tradicional 
usando o menu Filtros. Para mais informações, consultar “Ajuste da cor e do tom de um bitmap” 
na página 133. 


Aplicação de Efeitos ao vivo 


É possível aplicar um ou mais Efeitos ao vivo aos objetos selecionados, usando o Inspetor de 
propriedades. Sempre que um novo efeito for adicionado ao objeto, este será adicionado à lista no 
menu pop-up Efeitos do Inspetor de propriedades. E possível ativar ou desativar o efeito. 


Hooy | normal v| O 


Efeitos: + 


4 


Nenhum 
Opções + 
Aguçar > 
Ajustar cor > 
Chanfro extemo 
Embaçar 


d 
Outro b Interiorizar relevo 
Sombra e briho »| Relevo elevado 


Menu pop-up Efeitos do Inspetor de propriedades 
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Quando os objetos aos quais serão aplicados Efeitos ao vivo forem selecionados, o local das opções 
Efeitos ao vivo será um pouco diferente, se o Inspetor de propriedades estiver com toda a altura ou 
metade da altura: 


è Seo Inspetor de propriedades estiver maximizado para toda a altura, usar o botão Adicionar 
efeitos, o botão Excluir efeitos e a lista de Efeitos ao vivo aplicados, que estão exibidos no 
Inspetor de propriedades. 


* Seo Inspetor de propriedades estiver com a metade da altura, clicar em Editar efeitos para 
exibir o botão Adicionar efeitos, o botão Excluir efeitos e a lista de Efeitos ao vivo aplicados. 


Nota: Em Usando o Fireworks, as etapas que envolvem Efeitos ao vivo assumem que o Inspetor de propriedades 
está aberto com toda a altura. 


Cada Efeito ao vivo pode ser personalizado para ficar com a aparência desejada. Ao selecionar 
Chanfro, Embaçar, Relevo, Brilho, Sombra ou Aguçar, uma janela pop-up é aberta e nela o usuário 
pode ajustar as configurações de efeito. Quando o usuário seleciona efeitos para a correção de cores, 
são abertas caixas de diálogo contendo controles para o ajuste de características das cores como, 
nível, brilho e contraste, matiz e saturação, inversão, curvas e preenchimento colorido. Na seleção 
de um efeito embaçado ou aguçado, ele é aplicado diretamente no objeto. 


Testar as configurações até obter a aparência desejada. Se desejar alterar as configurações de efeito 
. guraç Oi s F de J guraç 
posteriormente, consultar “Edição de Efeitos ao vivo” na página 218. 


Largura de chanfro 


Contraste 
Suavidade 


Ângulo de chanfro 


Alto relevo : Chanfro de botão predefinido 


Janela pop-up Chanfro interno 


Para aplicar um Efeito ao vivo aos objetos selecionados: 


1 Clicar no botão Adicionar efeitos no Inspetor de propriedades e, em seguida, selecionar um 
efeito do menu pop-up Efeitos. 


O efeito será adicionado à lista Efeitos para o objeto selecionado. 


2 Se for aberta uma janela pop-up ou caixa de diálogo, digitar as configurações do efeito e, em 
seguida, seguir um destes procedimentos: 


e Seo Efeito ao vivo tiver uma caixa de diálogo, clicar em OK. 


e Seo Efeito ao vivo tiver uma janela pop-up, pressionar Enter ou clicar em qualquer parte do 
espaço de trabalho. 


3 Repetir as etapas 1 e 2 para aplicar mais Efeitos ao vivo. 
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Nota: A ordem de aplicação dos Efeitos ao vivo afeta o efeito geral. Você pode arrastar os Efeitos ao vivo para 
reorganizar a ordem de empilhamento. Para mais informações, consultar “Reordenação de Efeitos ao vivo” na 
página 218. 


Dica: Para aplicar um Efeito ao vivo de forma que apareça para afetar apenas uma seleção de pixel dentro de 


uma imagem, recortar e colar a seleção no local para criar uma nova imagem bitmap, selecioná-la e, em seguida, 
aplicar o Efeito ao vivo. 


Para ativar ou desativar um efeito aplicado a um objeto: 


Clicar na caixa de seleção ao lado do efeito na lista Efeitos do Inspetor de propriedades. 


Para ativar ou desativar todos os efeitos aplicados a um objeto: 


Clicar no botão Adicionar efeitos do Inspetor de propriedades e, em seguida, selecionar Opções > 
Tudo ativado ou Opções > Tudo desativado no menu pop-up. 


Para informações sobre como remover permanentemente os efeitos, consultar “Remoção de 
Efeitos ao vivo” na página 219. 
Aplicação de bordas chanfradas 


A aplicação de uma borda chanfrada a um objeto cria uma aparência de alto relevo. É possível 
criar um chanfro interno ou um chanfro externo. 


Um retângulo com Chanfro interno e Chanfro externo 


Para aplicar uma borda chanfrada a um objeto selecionado: 


1 Clicar no botão Adicionar efeitos no Inspetor de propriedades e, em seguida, escolher uma 
opção de chanfro no menu pop-up: 


e Chanfro e relevo > Chanfro interno 
e Chanfro e relevo > Chanfro externo 
2 Editar as configurações do efeito na janela pop-up. 


3 Clicar fora da janela ou pressionar Enter para fechá-la. 


Aplicação de relevo 


Pode-se usar o efeito Relevo para que a imagem, o objeto ou texto pareça estar em alto ou baixo 
relevo na tela. 


Um objeto com o efeito Interiorizar relevo e Relevo elevado 
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Para aplicar um efeito Relevo: 


1 Clicar no botão Adicionar efeitos no Inspetor de propriedades e, em seguida, escolher uma 
opção de relevo no menu pop-up: 


e Chanfro e relevo > Interiorizar relevo 
e Chanfro e relevo > Relevo elevado 
2 Editar as configurações do efeito na janela pop-up. 
Para que o objeto original apareça na área em relevo, selecionar Mostrar objeto. 
3 Depois de concluído, clicar fora da janela ou pressionar Enter para fechá-la. 


Nota: Para manter a compatibilidade com versões anteriores, os efeitos Relevo em objetos de documentos mais 
antigos são abertos com a opção Mostrar objeto sem estar selecionada. 


Aplicação de sombras e brilhos 


No Fireworks é fácil aplicar sombras, sombras internas e brilhos a objetos. Você pode especificar o 
ângulo da sombra para simular o ângulo de incidência da luz sobre o objeto. 


Efeitos Aplicar sombra, Sombra interna e Brilho 


Para aplicar uma sombra ou sombra interna: 


1 Clicar no botão Adicionar efeitos do Inspetor de propriedades e, em seguida, selecionar uma 
opção de sombra no menu pop-up: 


* Sombra e brilho > Aplicar sombra 

* Sombra e brilho > Sombra interna 

2 Editar as configurações do efeito na janela pop-up: 

è Arrastar o controle deslizante Distância para definir a distância entre a sombra e o objeto. 
e Clicar na caixa de cores para abrir a janela pop-up de cores e definir a cor da sombra. 


è Arrastar o controle deslizante Opacidade para definir a porcentagem de transparência da 
sombra. 


è Arrastar o controle deslizante Suavidade para definir a precisão da sombra. 
e Arrastar o dial Ângulo para definir a direção da sombra. 
è Selecionar Separação para ocultar o objeto e exibir apenas a sombra. 


3 Depois de concluído, clicar fora da janela ou pressionar Enter para fechá-la. 


Para aplicar um brilho: 


1 Clicar no botão Adicionar efeitos no Inspetor de propriedades e, em seguida, selecionar 
Sombra e brilho > Brilho. 
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2 Editar as configurações do efeito na janela pop-up: 

e Clicar na caixa de cores para abrir a janela pop-up de cores e definir a cor do brilho. 

e Arrastar o controle deslizante Largura para definir a largura do brilho. 

e Arrastar o controle deslizante Opacidade para definir a porcentagem de transparência do brilho. 
e Arrastar o controle deslizante Suavidade para definir a precisão do brilho. 

e Arrastar o controle deslizante Deslocamento para especificar a distância entre o brilho e o objeto. 


3 Depois de concluído, clicar fora da janela ou pressionar Enter para fechá-la. 


Aplicações de filtros e plug-ins do Photoshop como Efeitos ao vivo 


É possível aplicar todos os filtros integrados e plug-ins no menu Filtros como Efeitos ao vivo 
usando o Inspetor de propriedades. A sua aplicação como Efeitos ao vivo garante a edição ou 
remoção de um objeto a qualquer momento. 


Os plug-ins do Photoshop 6 e 7 são incompatíveis com o Fireworks MX. No Macintosh, os filtros 
de outros fornecedores criados para serem executados no Mac OS 9 são suportados pelo Fireworks 
MX quando executados no Mac OS 9, e aqueles criados para serem executados no Mac OS X são 
suportados pelo Fireworks MX quando executados no Mac OS X. 


Nota: O menu que nas versões anteriores do Fireworks era conhecido como Xtras, foi renomeado para menu 
Filtros no Fireworks MX. Os Xtras do Fireworks agora são os filtros. 


Plug-ins do menu Filtros 


Na instalação de um plug-in do Photoshop no Fireworks, ele é adicionado ao menu Filtros e ao 
Inspetor de propriedades. O menu Filtros deve ser usado para aplicar filtros e plug-ins do 
Photoshop, apenas se o usuário tiver certeza de que não desejará editar ou remover o efeito. 
Somente é possível remover um filtro se o comando Desfazer estiver disponível. 


Instalação de plug-ins do Photoshop 


É possível usar o Inspetor de propriedades para aplicar alguns plug-ins do Photoshop como 
Efeitos ao vivo. Nem todos os plug-ins do Photoshop podem ser usados como Efeitos ao vivo. 
Além disso, também é possível importar plug-ins do Photoshop apontando para uma pasta de 
plug-ins, usando a caixa de diálogo Preferências. Para mais informações, consultar “Preferências de 
pastas” na página 423. 


No compartilhamento de um arquivo do Fireworks em que um plug-in do Photoshop esteja 
aplicado como Efeito ao vivo, o usuário que abri-lo poderá exibir o efeito somente em um 
computador que tenha o plug-in instalado. No entanto, os efeitos internos do Fireworks são 
salvos com o arquivo do Fireworks. 


Para instalar plug-ins do Photoshop: 


1 Clicar no botão Adicionar efeitos no Inspetor de propriedades e, em seguida, selecionar 
Opções > Localizar plug-ins. 


2 Navegar até a pasta em que os plug-ins do Photoshop estão instalados e clicar em OK. 
3 Reiniciar o Fireworks para carregar os plug-ins. 


Nota: Se o usuário mover os plug-ins para uma pasta diferente, repetir as etapas acima ou escolher Arquivo > 
Preferências e clicar na guia Pastas para alterar o caminho dos plug-ins. Em seguida, reiniciar o Fireworks. 
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Para aplicar um plug-in do Photoshop a um objeto selecionado como um Efeito ao vivo: 


Clicar no botão Adicionar efeitos no Inspetor de propriedades e, em seguida, selecionar um efeito 
no submenu Opções. 


Sobre aplicação de efeito a objetos agrupados 


Se o usuário aplicar um efeito a um grupo, ele será aplicado a todos os objetos do grupo. Se os 
objetos forem desagrupados, as configurações do efeito de cada objeto serão revertidas para o 
efeito aplicado ao objeto individualmente. 


É possível aplicar um efeito a um objeto individual dentro de um grupo, selecionando apenas esse 
objeto com a ferramenta Subseleção. Para informações sobre como selecionar um grupo ou 
objetos de um grupo, consultar “Seleção de um objeto dentro de grupos” na página 122. 


Edição de Efeitos ao vivo 
Se o usuário clicar no botão de informações do Efeito ao vivo no Inspetor de propriedades, será 
aberta uma janela pop-up contendo as configurações atuais do efeito, que podem ser editadas. 
Para editar um Efeito ao vivo: 
1 No Inspetor de propriedades, clicar no botão de informações ao lado do efeito que deseja editar. 


A janela pop-up ou caixa de diálogo adequada será aberta. 


Separação 


Nota: Se o Inspetor de propriedades estiver aberto com a metade da altura, clicar em Adicionar efeitos para 
abrir a lista Efeitos ao vivo. 


2 Ajustar as configurações do efeito. 


Nota: Se o efeito não for editável, o botão de informações estará esmaecido. Por exemplo, não é possível 
editar Níveis automáticos. 


3 Clicar fora da janela ou pressionar Enter. 


Reordenação de Efeitos ao vivo 


É possível reorganizar a ordem dos efeitos aplicados a um objeto. A reorganização dos efeitos 
altera a segiiência em que foram aplicados, e isso pode alterar o efeito combinado. 


Em geral, os efeitos que alteram o interior de um objeto, como o Chanfro interno, devem ser 
aplicados antes dos efeitos que alteram o exterior do objeto. Por exemplo, aplicar o efeito Chanfro 
interno antes de aplicar os efeitos Chanfro externo, Brilho ou Sombra. 

Para reordenar os efeitos aplicados a um objeto selecionado: 

Arrastar o efeito para a posição desejada na lista do Inspetor de propriedades. 


Nota: Os efeitos listados no topo da lista são aplicados antes daqueles que estão na base da lista. 
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Remoção de Efeitos ao vivo 


É fácil remover os efeitos individuais ou todos os efeitos de um objeto. 


Para remover um único efeito aplicado a um objeto selecionado: 
Selecionar o efeito a ser removido da lista Efeitos no Inspetor de propriedades e, em seguida, clicar 
no botão Excluir efeitos. 
Para remover todos os efeitos de um objeto selecionado: 
Clicar no botão Adicionar efeitos no Inspetor de propriedades e, em seguida, escolher Nenhum no 
menu pop-up. 

Criação de Efeitos ao vivo personalizados 


É possível salvar uma combinação específica de configurações de Efeitos ao vivo, criando um 
Efeito ao vivo personalizado. Todos os Efeitos ao vivo personalizados aparecem no menu pop-up 
Adicionar efeitos no Inspetor de propriedades e no painel Estilos. Efeitos ao vivo personalizados 
são, na verdade, estilos com todas as opções de propriedade desativadas, exceto a opção Efeito. 


* É possível criar um Efeito ao vivo personalizado usando o Inspetor de propriedades ou o painel 
Estilos. 


e Você pode aplicar um Efeito ao vivo personalizado aos objetos selecionados, a partir do menu 
pop-up Adicionar efeitos ou no painel Estilos. 


* Ou, renomear ou excluir um Efeito ao vivo personalizado, usando o painel Estilos. 


Para criar um Efeito ao vivo personalizado usando o Inspetor de propriedades: 


1 Aplicar as configurações do Efeito ao vivo aos objetos selecionados. Para mais informações, 
consultar “Aplicação de Efeitos ao vivo” na página 213. 


2 Clicar no botão Adicionar efeitos do Inspetor de propriedades e, em seguida, selecionar 
Opções > Salvar como estilo. 


A caixa de diálogo Adicionar estilo será aberta. 

3 Digitar um nome para o estilo e clicar em OK. 
O nome do Efeito ao vivo personalizado será adicionado ao menu pop-up Adicionar efeitos, e 
um ícone de estilo representando o Efeito ao vivo será adicionado ao painel Estilos. 

Para criar um Efeito ao vivo usando o painel Estilos: 


1 Aplicar as configurações do Efeito ao vivo aos objetos selecionados. Para mais informações, 
consultar “Aplicação de Efeitos ao vivo” na página 213. 


2 Selecionar Adicionar estilo no menu Opções do painel Estilos. 
A caixa de diálogo Adicionar estilo será aberta. 
3 Desativar todas as propriedades exceto a propriedade Efeito, digitar um nome e clicar em OK. 


O nome do Efeito ao vivo personalizado será adicionado ao menu pop-up Adicionar efeitos, e 
um ícone de estilo representando o Efeito ao vivo será adicionado ao painel Estilos. 
Nota: Se o usuário selecionar qualquer propriedade adicional na caixa de diálogo Adicionar estilo, o estilo não 


poderá mais ser um item do menu pop-up Efeitos do Inspetor de propriedades, apesar de ele permanecer no 
painel Estilos como um estilo normal. 
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Para aplicar um Efeito ao vivo personalizado a objetos selecionados, seguir um destes 
procedimentos: 


e Clicar no botão Adicionar efeitos do Inspetor de propriedades e, em seguida, selecionar o 
Efeito ao vivo personalizado. 


e Clicar no ícone do Efeito ao vivo personalizado no painel Estilos. 


É possível renomear ou excluir um Efeito ao vivo personalizado, do mesmo modo que se faz com 
qualquer outro estilo no painel Estilos. Para mais informações, consultar “Criação e exclusão de um 
estilo” na página 250 e “Edição de um estilo” na página 251. 


Nota: Um efeito padrão do Fireworks não pode ser renomeado ou excluído. 


Como salvar Efeitos ao vivo como comandos 


Você pode salvar e reutilizar um efeito, criando um comando com base nesse efeito. Usando o 
painel Histórico, é possível automatizar todos os Efeitos ao vivo aplicados a um objeto, criando 
um comando disponível a partir do menu Comandos. Você pode usar esses comandos no 
processamento em lote. Para mais informações, consultar “Execução de um comando com um 
processo em lote” na página 412. 


Para salvar as configurações do efeito como comando: 


1 Aplicar os efeitos ao objeto. 
2 Seo painel Histórico não estiver visível, selecionar Janela > Histórico. 
3 Pressionar a tecla Shift e clicar na faixa de ações que deseja salvar como comando. 


4 Seguir um destes procedimentos: 


Selecionar Salvar como comando no painel Histórico do menu Opções. 


Clicar no botão Salvar na parte inferior do painel Histórico. 


EJ 


[C] Ferramenta Retângulo 


- 
ES Definir efeitos 


- 
ES Definir efeitos 


B ES Definir efeitos 
i 


7 Botão Salvar 


5 Digitar o nome do comando e clicar em OK para adicionar o comando ao menu Comandos. 
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CAPÍTULO 10 
Camada, mascaramento e mistura 


As camadas dividem um documento do Macromedia Fireworks MX em planos distintos, como se 
os componentes da ilustração tivessem sido desenhados em folhas separadas de papel vegetal. Um 
documento pode ser formado por várias camadas e cada camada pode conter diversos objetos. No 
Fireworks, o painel Camadas contém uma lista das camadas e dos objetos contidos em cada uma 
delas. As camadas do Fireworks são semelhantes aos conjuntos de camadas do Photoshop 6. As 
camadas do Photoshop são semelhantes aos objetos individuais do Fireworks. 


O mascaramento proporciona um controle de criatividade sobre camadas e objetos. O painel 
Camadas oferece a opção de aplicar máscaras e modos de mistura. As opções dos menus 
Selecionar e Modificar permitem a criação de máscaras. Usando um objeto vetorial ou bitmap, é 
possível delinear parte da imagem que está embaixo. Por exemplo, para delinear parte de uma 
fotografia de modo que ela pareça ter uma moldura elíptica ao seu redor, cole uma forma elíptica 
como uma máscara em cima da fotografia. Todas as áreas fora da elipse desaparecerão como se 
tivessem sido cortadas, mostrando apenas a parte da figura dentro da elipse. 


Técnicas de mistura proporcionam um outro nível de controle de criatividade. É possível criar 
efeitos exclusivos misturando cores em objetos sobrepostos. O Fireworks oferece vários modos de 
mistura para ajudá-lo a obter exatamente a aparência desejada. 


Como trabalhar com uma camada 


Cada objeto de um documento reside em uma camada. O usuário pode criar as camadas antes de 
desenhar ou adicioná-las, conforme a necessidade. A tela está embaixo de todas as camadas, mas 
ela mesma não é uma camada. Para informações sobre como trabalhar com a tela, consultar 
“Alteração da tela” na página 94. 


v 


O painel Camadas exibe a ordem de empilhamento de camadas e objetos. Essa é a ordem em que 
aparecem no documento. O Fireworks empilha as camadas com base na ordem em que foram 
criadas, inserindo a última camada criada no topo da pilha. A ordem de empilhamento determina 
a forma como os objetos de uma camada se sobrepõem aos objetos de outra. A ordem das camadas 
e dos objetos pode ser reorganizada em camadas. 
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O painel Camadas exibe o estado atual de todas as camadas da moldura atual de um documento. 
Para exibir outras molduras, usar o painel Molduras ou escolher uma opção no menu pop-up 
Moldura, na parte inferior do painel Camadas. Para mais informações, consultar “Como trabalhar 
com uma moldura” na página 314. 


O nome da camada ativa é realçado no painel Camadas. É possível expandir uma camada para 
exibir uma lista de todos os seus objetos. Os objetos são exibidos como miniaturas. 


O painel Camadas também mostra máscaras. Selecionar a miniatura da máscara permite editá-la. 
O painel Camadas também oferece a possibilidade de criar novas máscaras de bitmap. Para mais 
informações sobre máscaras, consultar “Mascaramento de imagens” na página 227. 


Os controles do modo de mistura e opacidade se encontram na parte superior do painel Camadas. 
Para mais informações, consultar “Ajuste da opacidade e aplicação de uma mistura” na página 247. 


Expande/recolhe camada 
Mostra/oculta camada 
Bloqueia/desbloqueia camada 


Normal 


CamadadaWeb <H» 


Camada 1 
Camada 2 Camada ativa 


Camada 3 


Moldura 1 


Exclui camada 
Nova imagem bitmap 
Adiciona máscara 
Camada nova/duplicada 


Ativação de uma camada 
Um clique em uma camada ou em um de seus objetos faz com que ela se torne a camada ativa. Os 
objetos desenhados, colados ou importados residem inicialmente na camada ativa. 
Para ativar uma camada, seguir um destes procedimentos: 
e Clicar no nome da camada no painel Camadas. 


* Selecionar um objeto nessa camada. 


Adição e remoção de uma camada 


O painel Camadas oferece as seguintes opções: adicionar novas camadas, excluir camadas 
indesejadas e duplicar camadas e objetos existentes. 


Quando se cria uma nova camada, uma camada em branco é inserida acima da camada 
selecionada atualmente. A nova camada passa a ser a camada ativa e é realçada no painel Camadas. 
Quando se exclui uma camada, a camada acima dela se torna a camada ativa. 
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A criação de uma camada duplicada adiciona uma nova camada que contém os mesmos objetos que 
a camada selecionada atualmente. Objetos duplicados retêm o modo de mistura e opacidade dos 
objetos dos quais foram copiados. É possível alterar os objetos duplicados sem afetar os originais. 
Para adicionar uma camada, seguir um destes procedimentos: 

e Clicar no botão Camada nova/duplicada sem selecionar uma camada. 


è Escolher Editar > Inserir > Camada. 


e No menu Opções do painel Camadas, selecionar Nova camada e clicar em OK. 


Para excluir uma camada, seguir um destes procedimentos: 


e Arrastar a camada para o ícone de lixeira no painel Camadas. 


* Selecionar a camada e clicar no ícone de lixeira no painel Camadas. 


Para duplicar uma camada, seguir um destes procedimentos: 
e Arrastar uma camada até o botão Camada nova/duplicada. 


e No menu Opções do painel Camadas, selecionar uma camada e escolher Duplicar camada. 
Escolher o número de camadas duplicadas a inserir e onde posicioná-las na ordem de 
empilhamento: 


No topo posiciona as novas camadas no topo do painel Camadas. A Camada da Web é sempre 
a camada superior; portanto, selecionar No topo posiciona a camada duplicada embaixo da 


Camada da Web. 


Antes da camada atual posiciona as novas camadas acima da camada selecionada. 
Depois da camada atual posiciona as novas camadas abaixo da camada selecionada. 


Na base posiciona as novas camadas na base do painel Camadas. 


Para duplicar um objeto: 


Manter pressionada a tecla Alt (Windows) ou Option (Macintosh) e arrastar o objeto até a 
posição desejada. 


Exibição de uma camada 


O painel Camadas exibe os objetos e camadas em uma estrutura hierárquica. Se um documento 
contiver vários objetos e camadas, o painel Camadas poderá ficar desorganizado e ficará difícil 
navegar nele. Recolher a exibição de camadas ajuda a eliminar a bagunça. Quando for necessário 
exibir ou selecionar objetos específicos em uma camada, ela poderá ser expandida. Também é 
possível expandir ou recolher todas as camadas ao mesmo tempo. 


Para expandir ou recolher os objetos em uma camada: 

Clicar no sinal de adição (+) ou subtração (-) (Windows) ou no triângulo (Macintosh) à esquerda 
do nome da camada no painel Camadas. 

Para expandir ou recolher todas as camadas: 


Manter pressionada a tecla Alt e clicar no sinal de adição (+) ou subtração (-) (Windows), ou 
manter pressionada a tecla Option e clicar no triângulo (Macintosh) à esquerda do nome da 
camada no painel Camadas. 
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Organização de uma camada 


É possível organizar os objetos e camadas em um documento nomeando-os e reorganizando-os no 
painel Camadas. Os objetos podem ser movidos dentro de uma camada ou entre camadas. 


Mover camadas e objetos no painel Camadas altera a ordem em que os objetos aparecem na tela. 
Os objetos no topo de uma camada aparecem acima dos outros objetos dessa camada na tela. Os 
objetos na camada mais alta aparecem na frente de objetos em camadas inferiores. 


Nota: O painel Camadas rola automaticamente quando uma camada ou um objeto é arrastado para cima ou para 
baixo além dos limites da área visualizável. 


Para nomear um objeto ou camada: 
1 Clicar duas vezes em um objeto ou camada no painel Camadas. 
2 Digitar um novo nome para o objeto ou camada e pressionar Enter. 


Nota: Não é possível renomear a camada da Web. No entanto, é possível nomear objetos da Web na camada da 
Web, como fatias e pontos ativos. Para mais informações, consultar “Uso da Camada da Web” na página 226. 


Para mover um objeto ou camada: 


Arrastar a camada ou o objeto até a posição desejada no painel Camadas. 
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Para mover todos os objetos selecionados em uma camada para outra posição: 
Arrastar o indicador de seleção azul de uma camada para outra. 


Todos os objetos selecionados na camada são movidos simultaneamente para a outra camada. 


Para copiar todos os objetos selecionados em uma camada para outra posição: 


Manter pressionada a tecla Alt (Windows) ou Option (Macintosh) e arrastar o indicador de seleção 
azul de uma camada para outra. 


Todos os objetos selecionados na camada são copiados para a outra camada. 


Como proteger uma camada e um objeto 


O painel Camadas oferece várias opções que permitem controlar a acessibilidade de objetos. 
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É possível proteger os objetos de um documento contra edição e seleção acidentais. Bloquear uma 
camada evita a seleção ou edição dos respectivos objetos. O recurso Edição de camada única 
protege os objetos em todas as camadas, exceto na camada ativa, contra alterações ou seleções 
indesejadas. Através do painel Camadas também é possível controlar a visibilidade dos objetos e 
camadas na tela. Quando um objeto ou camada estiver oculto no painel Camadas, ele não 
aparecerá na tela e, assim, não poderá ser alterado nem selecionado inadvertidamente. 

Nota: Camadas e objetos ocultos não são incluídos quando um documento é exportado. No entanto, os objetos da 


camada da Web podem ser exportados sempre, independentemente de estarem ocultos ou não. Para mais 
informações sobre exportação, consultar “Exportação do Fireworks” na página 347. 


Para bloquear uma camada: 
Clicar no quadrado da primeira coluna imediatamente à esquerda do nome da camada. 


Um ícone de cadeado indica que a camada está bloqueada. 


Nota: Embora seja possível bloquear camadas, o mesmo não ocorre com objetos individuais. 


Para bloquear várias camadas: 


No painel Camadas, arrastar o ponteiro pela coluna Bloquear. 


Para bloquear ou desbloquear todas as camadas: 


No menu Opções do painel Camadas, escolher Bloquear todas ou Desbloquear todas. 


Para ativar ou desativar o recurso Edição de camada única: 


No menu Opções do painel Camadas, escolher Edição de camada única. 


Uma marca de seleção indica que a Edição de camada única está ativa. 


Para mostrar ou ocultar uma camada ou objetos em uma camada: 
Clicar no quadrado da coluna do meio à esquerda de um nome de camada ou objeto. 


[=] O ícone de um olho indica que a camada está visível. 


Para mostrar ou ocultar vários objetos ou camadas: 


No painel Camadas, arrastar o ponteiro pela coluna do olho. 


Para mostrar ou ocultar todos os objetos e camadas: 


No menu Opções do painel Camadas, escolher Mostrar tudo ou Ocultar tudo. 


Mesclagem de um objeto no painel Camadas 


O trabalho com objetos bitmap poderá fazer com que o painel Camadas fique desorganizado em 
pouco tempo. O Fireworks oferece a opção de mesclagem de objetos no painel Camadas, caso o 
último objeto selecionado esteja imediatamente acima de um objeto de bitmap. Os objetos e 
bitmaps a serem mesclados não necessitam ser adjacentes no painel Camadas, nem residir na 
mesma camada. 


Mesclar para baixo faz com que todos os objetos bitmap e vetoriais selecionados sejam nivelados 
no objeto bitmap que está logo abaixo do último objeto selecionado. O resultado é um único 
objeto bitmap. Depois de mesclados, os objetos bitmap e vetoriais não podem ser editados 
separadamente e perde-se a capacidade de edição de objetos vetoriais. 
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Para mesclar objetos: 


1 No painel Camadas, selecionar os objetos que se deseja mesclar com um objeto bitmap. 
Manter pressionada a tecla Shift e clicar para selecionar mais de um objeto. 


Dica: É possível mesclar o conteúdo de uma camada selecionada em um objeto bitmap que seja o primeiro da 
camada imediatamente abaixo da camada selecionada. 


2 Seguir um dos seguintes procedimentos: 
* Escolher Mesclar para baixo no menu Opções do painel Camadas. 
è Escolher Modificar > Mesclar para baixo. 


* No menu contextual que aparece quando se clica com o botão direito do mouse (Windows) ou 
com a tecla Control (Macintosh) nos objetos selecionados na tela, escolher Mesclar para baixo. 


Os objetos selecionados são mesclados com o objeto bitmap. O resultado é um único objeto bitmap. 


Nota: Mesclar para baixo não afeta fatias, pontos ativos nem botões. 


Compartilhamento de uma camada 


É possível compartilhar uma camada entre todas as molduras de um documento. Com isto, ao 
atualizar um objeto em uma camada, ele é atualizado automaticamente em todas as molduras. Isso 
será útil para mostrar objetos, como elementos de fundo, em todas as molduras de uma animação. 


Para compartilhar uma camada selecionada entre molduras, seguir um dos seguintes 
procedimentos: 
* No menu Opções do painel Camadas, escolher Compartilhar esta camada. 


e No painel Camadas, clicar duas vezes no nome da camada e escolher Compartilhar entre 
molduras. 


Uso da Camada da Web 


A camada da Web é uma camada especial que aparece como a camada superior em cada 
documento. Essa camada contém objetos da Web, como fatias e pontos ativos, que são usados 
para atribuir interatividade a documentos exportados do Fireworks. Para mais informações sobre 
objetos da Web, consultar Capítulo 12, “Fatias, rollovers e pontos ativos”, na página 261. 


Não é possível cancelar o compartilhamento, excluir, duplicar, mover ou renomear a camada da 
Web. Também não é possível mesclar objetos que nela residam. Ela sempre é compartilhada entre 
todas as molduras, e os objetos da Web ficam visíveis em todas as molduras. 

Para renomear uma fatia ou um ponto ativo na camada da Web: 

1 No painel Camadas, clicar duas vezes na fatia ou no ponto ativo. 

2 Digitar um novo nome e clicar fora da janela ou pressionar a tecla Enter. 


Nota: Se uma fatia for renomeada, esse nome será usado quando ela for exportada. 


Sobre importação de camadas agrupadas do Photoshop 


Os arquivos do Photoshop que contêm camadas são importados com cada camada posicionada como 
um objeto separado em uma camada única do Fireworks. As camadas agrupadas são importadas como 
camadas individuais, como se tivessem sido desagrupadas no Photoshop antes da importação para o 
Fireworks. O efeito de corte nas camadas agrupadas do Photoshop perde-se na importação. 
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Mascaramento de imagens 


Como o nome sugere, as máscaras ocultam ou mostram partes de um objeto ou imagem. 
Qualquer uma das diversas técnicas de mascaramento possibilita a aplicação de vários tipos de 
efeitos criativos a objetos. 


É possível criar uma máscara que funcione como uma estampa de biscoito em outros objetos. Para 
isso, basta cortar imagens ou objetos com seu traçado que estão embaixo. Uma outra possibilidade 
é criar uma máscara que funcione como uma janela enevoada, que permite revelar ou ocultar 
partes dos objetos embaixo dela. Para isso, basta desenhar na máscara. Esse tipo de máscara usa os 
tons da aparência dos tons de cinza para afetar a visibilidade dos objetos selecionados. Uma outra 
alternativa é criar uma máscara que use sua própria transparência para afetar a visibilidade. 


Para criar uma máscara, usa-se o painel Camadas ou os menus Editar, Selecionar ou Modificar. 
Depois de criada a máscara, será possível ajustar a posição da seleção com máscara na tela ou 
modificar a aparência da máscara editando o objeto de máscara. Além disso, existe a opção de 
aplicar transformações à máscara como um todo ou a seus componentes individuais. 


Sobre máscaras 


O objeto de máscara pode ser um objeto vetorial ou bitmap. O uso de um objeto vetorial ou 
bitmap como máscara produz uma máscara vetorial ou de bitmap, respectivamente. Também é 
possível usar vários objetos ou objetos agrupados para criar uma máscara. 


Sobre máscaras vetoriais 


Se o usuário estiver acostumado a trabalhar com outros aplicativos de ilustração de vetor, como o 
Macromedia FreeHand, talvez já estará familiarizado com máscaras vetoriais, que às vezes são 
chamadas de traçados de corte ou itens de colagem. O traçado de um objeto de máscara vetorial 
corta os objetos que estão embaixo para lhes dar a forma de seu traçado, criando um efeito de 
estampa de biscoito. 


Uma máscara vetorial aplicada com o uso de seu contorno de traçado 


Ao se criar uma máscara vetorial, uma miniatura de máscara com um ícone de caneta aparece no 
painel Camadas para indicar que essa é uma máscara vetorial. 


Uma miniatura de máscara vetorial no painel Camadas 
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Ao selecionar uma máscara vetorial, o Inspetor de propriedades exibe informações sobre a maneira 
como ela é aplicada. A metade inferior do Inspetor de propriedades exibe propriedades adicionais 
que permitem editar o preenchimento e o traço do objeto de máscara. 
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Propriedades da máscara vetorial no Inspetor de propriedades 


Por padrão, máscaras vetoriais são aplicadas com o uso de seu contorno de traçado, mas também é 
possível aplicá-las de outras maneiras. Para mais informações, consultar “Alteração da forma de 
aplicação de uma máscara” na página 241. 


Nota: As máscaras vetoriais criadas no Fireworks 4 e aplicadas com o uso da aparência dos tons de cinza são 
importadas como máscaras de bitmap não editáveis no Fireworks MX. 


Sobre máscaras de bitmap 


Os usuários do Photoshop talvez já estejam familiarizados com máscaras de camada. As máscaras 
de bitmap do Fireworks são semelhantes às máscaras de camada, pois os pixels de um objeto de 
máscara afetam a visibilidade dos objetos que estão embaixo. Entretanto, as máscaras de bitmap 
do Fireworks são muito mais versáteis: é fácil alterar a forma como são aplicadas, quer usando a 
aparência dos tons de cinza ou sua própria transparência. Além disso, o Inspetor de propriedades 
do Fireworks torna as propriedades da máscara e as opções de ferramentas de bitmap mais 
acessíveis, o que simplifica consideravelmente o processo de edição da máscara. Quando uma 
máscara é selecionada, o Inspetor de propriedades exibe uma ampla gama de propriedades, não 
apenas para a máscara selecionada, mas também para quaisquer ferramentas de bitmap que 
possam ser usadas para editá-la. 


VA 
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Objetos originais e uma máscara de bitmap aplicada com o uso da aparência dos tons de cinza 


Há duas maneiras de aplicação de máscaras de bitmap: 


* Com o uso de um objeto existente para mascarar outros objetos. Essa técnica é semelhante à 
forma como máscaras vetoriais são aplicadas. 
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e Co a criação daquilo que é conhecido como máscara vazia. Inicialmente, as máscaras vazias são 
totalmente transparentes ou totalmente opacas. Uma máscara transparente (ou branca) mostra 
todo o objeto com máscara e uma máscara opaca (ou preta) oculta todo o objeto. As 
ferramentas de bitmap podem ser usadas para desenhar no objeto de máscara ou para modificá- 
lo, mostrando ou ocultando os objetos com máscara que estão embaixo. 


Ao se criar uma máscara de bitmap, o Inspetor de propriedades exibe informações sobre a maneira 
como ela é aplicada. Se uma ferramenta de bitmap for escolhida quando uma máscara de bitmap 
estiver selecionada, o Inspetor de propriedades exibirá as propriedades e opções da máscara para a 
ferramenta selecionada, simplificando o processo de edição da máscara. 
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Propriedades da máscara de bitmap no Inspetor de propriedades quando uma ferramenta de bitmap 
está selecionada 


Por padrão, a maioria das máscaras de bitmap são aplicadas com o uso da aparência dos tons de 
cinza, mas também é possível aplicá-las com o uso de seu canal alfa. Para mais informações, 
consultar “Alteração da forma de aplicação de uma máscara” na página 241. 


Nota: Agora, as máscaras de tons de cinza do Fireworks MX funcionam de uma maneira muito semelhante às 
máscaras de outros aplicativos gráficos. As máscaras de tons de cinza criadas no Fireworks MX diferem das 
criadas em versões anteriores do Fireworks, pois as máscaras brancas sempre mostram objetos com máscara, 
enquanto as máscaras pretas sempre ocultam esses objetos. Compare isso com o Fireworks 4, no qual uma 
máscara preta mostrava os objetos que estavam embaixo e uma máscara branca os ocultava. 


Criação de uma máscara com base em um objeto existente 


É possível criar uma máscara com base em um objeto existente. Quando usado como máscara, o 
contorno do traçado de um objeto vetorial pode ser utilizado para cortar outros objetos. Quando 
um objeto bitmap é usado como máscara, o brilho de seus pixels ou sua transparência afeta a 
visibilidade de outros objetos. 


Mascaramento de um objeto com o comando Colar como máscara 


O comando Colar como máscara permite a criação de máscaras através do mascaramento de um 
objeto ou grupo de objetos com outro objeto. O comando cria uma máscara vetorial ou de 
bitmap, dependendo do tipo de objeto de máscara usado. Ao se usar um objeto vetorial como 
máscara, Colar como máscara cria uma máscara vetorial que corta objetos com máscara usando o 
contorno do traçado do objeto vetorial. Ao utilizar uma imagem bitmap como máscara, Colar 
como máscara cria uma máscara de bitmap que afeta a visibilidade de objetos com máscara 
usando os valores de cor dos tons de cinza do objeto bitmap. 


Para criar uma máscara com o comando Colar como máscara: 


1 Selecionar o objeto que se deseja usar como máscara. Manter pressionada a tecla Shift e clicar 
para selecionar vários objetos. 


Nota: O uso de vários objetos como máscara sempre cria uma máscara vetorial, mesmo que todos os objetos 
sejam bitmaps. 
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2 Posicionar a seleção de modo que sobreponha-se ao objeto ou grupo de objetos a ser 
mascarado. 


O objeto ou objetos a serem usados como máscara podem ficar na frente ou atrás dos objetos 
ou grupo a serem mascarados. 


3 Escolher Editar > Recortar para recortar o objeto ou objetos que se deseja usar como máscara. 
4 Selecionar o objeto ou grupo a ser mascarado. 


Se o usuário mascarar vários objetos, eles deverão ser agrupados. Para mais informações sobre 
como agrupar objetos, consultar “Como agrupar um objeto” na página 122. 


5 Para colar a máscara, seguir um dos seguintes procedimentos: 


è Escolher Editar > Colar como máscara. 
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è Escolher Modificar > Máscara > Colar como máscara. 


Uma máscara aplicada 
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Mascaramento de um objeto com o comando Colar em 


Os usuários do Macromedia FreeHand talvez já estejam familiarizados com o método de criação 
de máscaras Colar em. O comando Colar em cria uma máscara vetorial ou de bitmap, 
dependendo do tipo de objeto de máscara utilizado. O comando Colar em cria uma máscara que 
preenche com outros objetos (gráficos vetoriais, texto ou imagens bitmap) um traçado fechado ou 
objeto bitmap. Às vezes, o próprio traçado é chamado de traçado de corte e os itens que ele 
contém são chamados de conteúdo ou itens de colagem. O conteúdo que ultrapassar o traçado de 
corte ficará oculto. 


No Fireworks, o comando Colar em produz um efeito semelhante ao comando Colar como 
máscara, com algumas diferenças: 


* Com Colar em, o objeto recortado e colado é aquele a ser mascarado. Comparar isso com o 
comando Colar como máscara, em que o objeto recortado e colado é o objeto de máscara. 


* Com máscaras vetoriais, Colar em mostra o preenchimento e o traço do próprio objeto de 
máscara. Por padrão, o comando Colar como máscara não torna visíveis o preenchimento e o 
traço do objeto de máscara vetorial. No entanto, é possível ativar ou desativar o preenchimento 
e o traço de uma máscara vetorial com o uso do Inspetor de propriedades. Para mais 
informações, consultar “Alteração da forma de aplicação de uma máscara” na página 241. 
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Para criar uma máscara com o comando Colar em: 
1 Selecionar o objeto ou objetos a serem usados como conteúdo da colagem. 


2 Posicionar o objeto ou objetos de modo que sobreponham-se ao objeto dentro do qual será 
colado o conteúdo. 


Nota: A ordem de empilhamento não é importante, desde que os objetos a serem usados como conteúdo da 
colagem permaneçam selecionados. Esses objetos podem estar acima ou abaixo do objeto de máscara no 
painel Camadas. 


3 Escolher Editar > Recortar para mover os objetos para a Área de transferência. 


4 Selecionar o objeto no qual se deseja colar o conteúdo. Esse objeto será usado como máscara ou 
traçado de corte. 
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5 Escolher Editar > Colar em. 


Os objetos colados parecem estar dentro do objeto de máscara ou cortados por ele. 


Uso de texto como máscara 


Máscaras de texto são um tipo de máscara vetorial e são aplicadas da mesma maneira que as máscaras 
são aplicadas com o uso de objetos existentes. Basta usar o texto como o objeto de máscara. A 
maneira mais comum de se aplicar uma máscara de texto é com o uso de seu contorno de traçado. 
Mas também é possível aplicar uma máscara de texto com o uso da aparência dos tons de cinza. 


Uma máscara de texto aplicada com o uso de seu contorno de traçado 


ara mais informações, consultar “Criação de uma máscara com base em um objeto existente” na 
Para mais infi nsultar “C de um ra com base em bjeto existente” n 
página 229. Para mais informações sobre as diferentes formas de aplicar máscaras, consultar 
“Alteração da forma de aplicação de uma máscara” na página 241. 


Mascaramento de um objeto através do painel Camadas 


A maneira mais rápida de se adicionar uma máscara de bitmap transparente vazia é através do 
painel Camadas. O painel Camadas adiciona uma máscara branca a um objeto, que o usuário 
pode personalizar desenhando nela com as ferramentas de bitmap. 


Nota: Para detalhes sobre como criar máscaras opacas (ou pretas) vazias, consultar “Mascaramento de um objeto 
com os comandos Revelar e Ocultar” na página 234. 


Para criar uma máscara de bitmap com o uso do painel Camadas: 


1 Selecionar o objeto que se deseja mascarar. 
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2 Na parte inferior do painel Camadas, clicar no botão Adicionar máscara. 


Uma máscara vazia é aplicada ao objeto selecionado. O painel Camadas exibe uma miniatura 
de máscara que representa a máscara vazia. 


3 Opcionalmente, se o objeto com máscara for um bitmap, usar uma das ferramentas de 
Moldura da caixa de seleção ou Laço para criar uma seleção de pixels. 


4 No painel Ferramentas, escolher uma ferramenta de pintura de bitmap, como as ferramentas 
Pincel, Lápis, Lata de tinta ou Dégradé. 


5 Definir as opções de ferramenta desejadas no Inspetor de propriedades. 


6 Com a máscara ainda selecionada, desenhar na máscara vazia. Nas áreas desenhadas, o objeto 
com máscara que está embaixo fica oculto. 


Imagem original; máscara aplicada 
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A máscara da maneira como aparece no painel Camadas 


Nota: Para mais informações sobre como modificar a aparência de uma máscara de bitmap desenhando nela, 
consultar “Modificação da aparência de uma máscara” na página 240. 


Mascaramento de um objeto com os comandos Revelar e Ocultar 


O submenu Modificar > Máscara oferece várias opções de aplicação de máscaras de bitmap vazias 
a objetos: 


Revelar tudo aplica uma máscara transparente vazia a um objeto, o que revela todo o objeto. 
Revelar tudo tem o mesmo efeito que clicar no botão Adicionar máscara no painel Camadas. 


Ocultar tudo aplica uma máscara opaca vazia a um objeto, o que oculta todo o objeto. 


Revelar seleção pode ser usada somente com seleções de pixels. Ela aplica uma máscara de pixels 
transparentes com o uso da seleção de pixels atual. Os outros pixels do objeto bitmap ficam ocultos. 
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Ocultar seleção pode ser usada somente com seleções de pixels. Ela aplica uma máscara de pixels 
opacoscom o uso da seleção de pixels atual. Os outros pixels do objeto bitmap são mostrados. 
Para usar os comandos Revelar tudo e Ocultar tudo para criar uma máscara: 

1 Selecionar o objeto que se deseja mascarar. 

2 Para criar a máscara, seguir um dos seguintes procedimentos: 

è Escolher Modificar > Máscara > Revelar tudo, para mostrar o objeto. 

è Escolher Modificar > Máscara > Ocultar tudo, para ocultar o objeto. 


3 No painel Ferramentas, escolher uma ferramenta de pintura de bitmap, como Pincel, Lápis ou 
Lata de tinta. 


4 Definir as opções de ferramenta desejadas no Inspetor de propriedades. 
Se uma máscara Ocultar tudo estiver aplicada, será necessário escolher uma cor diferente de preto. 


5 Desenhar na máscara vazia. Nas áreas desenhadas, o objeto com máscara que está embaixo fica 
oculto ou é mostrado, dependendo do tipo de máscara aplicada. 


Nota: Para mais informações sobre como modificar a aparência de uma máscara de bitmap desenhando nela, 
consultar “Modificação da aparência de uma máscara” na página 240. 


Para usar os comandos Revelar seleção e Ocultar seleção para criar uma máscara: 


1 Escolher Varinha mágica ou alguma ferramenta de Moldura, na caixa de seleção, ou Laço, no 
painel Ferramentas. 


2 Selecionar pixels em um bitmap. 


T 


Sr 


Imagem original; pixels selecionados com a Varinha mágica 


3 Para criar a máscara, seguir um dos seguintes procedimentos: 


* Escolher Modificar > Máscara > Revelar seleção para mostrar a área definida pela seleção de 
pixels. 
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è Escolher Modificar > Máscara > Ocultar seleção para ocultar a área definida pela seleção de pixels. 


Os resultados de Revelar seleção e Ocultar seleção 


Usa-se a seleção de pixels para aplicar uma máscara de bitmap. Com as ferramentas de bitmap 
do painel Ferramentas, é possível fazer outras edições na máscara para revelar ou ocultar os 
pixels restantes do objeto com máscara. Para mais informações sobre como modificar a 
aparência de uma máscara de bitmap desenhando nela, consultar “Modificação da aparência de 
uma máscara” na página 240. 


Sobre importação e exportação de uma máscara de camada do Photoshop 


O Photoshop permite mascarar imagens com máscaras de camada ou camadas agrupadas. O 
Fireworks permite importar com êxito imagens que usem máscaras de camada sem perder a 
capacidade de editá-las. Máscaras de camada são importadas como máscaras de bitmap. 


As máscaras do Fireworks também podem ser exportadas para o Photoshop. Elas são convertidas 
em máscaras de camada do Photoshop. Se os objetos com máscara incluírem texto e o usuário 
desejar manter a editabilidade do texto no Photoshop, será necessário escolher Manter a 
editabilidade sobre a aparência ao exportar. 


Nota: Se o objeto de máscara for texto, ele será convertido em bitmap e perderá sua editabilidade depois de 
importado para o Photoshop. 
Agrupamento de um objeto para formar uma máscara 


É possível agrupar dois ou mais objetos existentes para criar uma máscara. O objeto do topo torna- 
se o objeto de máscara. 


Há a opção de agrupar objetos como máscaras vetoriais ou de bitmap. A ordem de empilhamento 
determina o tipo de máscara aplicada. Se o objeto do topo for um objeto vetorial, o resultado será 
uma máscara vetorial. Se o objeto do topo for um objeto bitmap, o resultado será uma máscara de 
bitmap. 


Nota: Para mais informações sobre máscaras vetoriais e de bitmap, consultar “Sobre máscaras” na página 227. 
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Para agrupar objetos a fim de formar uma máscara: 


1 Manter pressionada a tecla Shift e clicar em dois ou mais objetos sobrepostos. 


+ 


É possível selecionar objetos de camadas diferentes. 


2 Escolher Modificar > Máscara > Agrupar como máscara. 


Edição de uma máscara 


Há várias maneiras de se modificar uma máscara. A modificação da posição, forma e cor de uma 
máscara altera a visibilidade dos objetos com máscara. Também existe a opção de se alterar o tipo 
de máscara e a forma como ela é aplicada. Além disso, é possível substituir, desativar ou excluir 
máscaras. 


Os resultados da edição de uma máscara ficam visíveis imediatamente, mesmo que o próprio 
objeto de máscara não esteja visível na tela. A miniatura de máscara no painel Camadas exibe as 
edições feitas na máscara. 


Os objetos com máscara também podem ser modificados. É possível reorganizar objetos com 
máscara sem mover a máscara. Uma outra opção oferecida é de adicionar outros objetos com 
máscara a um grupo de máscaras existente. 
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Seleção de máscara e objeto com máscara com o uso de miniaturas de 
máscara 


Com as miniaturas do painel Camadas, é fácil identificar e selecionar máscaras e objetos com 
máscara. As miniaturas permitem selecionar e editar com facilidade apenas a máscara ou os 
objetos com máscara, sem afetar os outros objetos. 


Quando a miniatura da máscara é selecionada, o ícone da máscara aparece ao lado dela no painel 
Camadas e suas propriedades são mostradas no Inspetor de propriedades, onde podem ser 
alteradas, se desejado. 


z 
H 100 Im Normal 
Ds E Camada da Web 


BENAS 


Moldura 1 


Máscara vetori:| Mascarar: (5) Contorno do traçado [ ] Mostrar preenchimento e traço 


E1002 | normal v| O 


ra 
bs O Aparência da escala de cinza Efeitos: + 
Zi A l 
w [20 | x[i || @ sólido v| ZIZ) |M [Nenu iv] 
H: [z0 | Y:[2 || Borda: | Suavização d w Borda: EM A 


Para selecionar uma máscara: 

Clicar na miniatura da máscara no painel Camadas. 

Quando uma miniatura de máscara está selecionada, o painel Camadas exibe um realce amarelo 
ao seu redor. 

Para selecionar objetos com máscara: 


No painel Camadas, clicar na miniatura do objeto com máscara. 


Quando a miniatura de um objeto com máscara está selecionada, o painel Camadas exibe um 
realce azul ao seu redor. 


Seleção de máscara e objeto com máscara com o uso da ferramenta 
Selecionar secundário 


Com a ferramenta Selecionar secundário, é possível selecionar máscaras individuais e objetos com 
máscara na tela sem selecionar os outros componentes da máscara. 


Quando uma máscara ou um objeto com máscara é selecionado com a ferramenta Selecionar 
secundário, o Inspetor de propriedades mostra as propriedades do objeto selecionado. 

Para selecionar uma máscara ou objeto com máscara de forma independente: 

Clicar no objeto na tela com a ferramenta Selecionar secundário. 


Quando selecionados, os objetos com máscara exibem um realce azul e as máscaras exibem um 
realce amarelo. 
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Como mover uma máscara e um objeto com máscara 

É possível reposicionar máscaras e objetos com máscara. Eles podem ser movidos ao mesmo 
tempo ou de forma independente. 

Para mover uma máscara e respectivos objetos com máscara ao mesmo tempo: 

1 Selecionar a máscara na tela com a ferramenta Ponteiro. 


2 Arrastar a máscara para a nova posição, mas tomar cuidado para não arrastar a alça de 
movimentação, e mover o objeto com máscara separadamente da máscara. 


Para mover máscaras e objetos com máscara de forma independente por meio de desvinculação: 
1 Clicar no ícone de vínculo na máscara no painel Camadas. 


Isso desvincula as máscaras dos objetos com máscara para que possam se mover de forma 
independente. 


Hoo |S | Norma 
O & E Camada da Web 


Ícone de vínculo 


Moldura 1 


2 Selecionar a miniatura do objeto que se deseja mover: a máscara ou os objetos com máscara. 
3 Arrastar o objeto ou objetos na tela com a ferramenta Ponteiro. 
Nota: A operação de movimentação de objetos com máscara move todos eles ao mesmo tempo. 
4 Clicar entre as miniaturas de máscara no painel Camadas. Esse procedimento revincula os 
objetos com máscara à máscara. 
Para mover uma máscara de forma independente com o uso de sua alça de movimentação: 


1 Selecionar a máscara na tela com a ferramenta Ponteiro. 
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2 Escolher a ferramenta Selecionar secundário e arrastar a alça de movimentação da máscara para 
a nova posição. 


Para mover objetos com máscara de forma independente da máscara com o uso da alça de 
movimentação: 


1 Selecionar a máscara na tela com a ferramenta Ponteiro. 
2 Arrastar a alça de movimentação para a nova posição. 
Os objetos são movidos sem afetar a posição da máscara. 


Nota: Se houver mais de um objeto com máscara, esse procedimento moverá todos eles juntos. 


Para mover objetos com máscara independentemente uns dos outros: 


Clicar no objeto com a ferramenta Selecionar secundário para selecioná-lo e, em seguida, arrastá- 
lo. 


Esse é o único método que permite selecionar e mover um objeto com máscara individual sem 
afetar outros objetos com máscara. 


Modificação da aparência de uma máscara 
A modificação da forma e cor de uma máscara altera a visibilidade dos objetos com máscara. 


É possível modificar a forma de uma máscara de bitmap. Para fazer isso, basta desenhar nela com 
as ferramentas de bitmap. Para modificar a forma de uma máscara vetorial, basta mover os pontos 
do objeto de máscara. 
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Se a máscara for aplicada com o uso da aparência dos tons de cinza, será possível modificar suas 
cores para afetar a opacidade dos objetos com máscara que estão embaixo. O uso de cores de 
meio-tom em uma máscara de tons de cinza confere uma aparência translúcida aos objetos com 
máscara. Cores mais claras exibem os objetos com máscara, enquanto cores mais escuras os 
ocultam e mostram o fundo. 


Uma outra possibilidade é alterar uma máscara adicionando outros objetos de máscara a ela. Além 
disso, as ferramentas de transformação oferecem um outro método para alterar máscaras. 

Para modificar a forma da máscara selecionada, seguir um dos seguintes procedimentos: 

è Desenhar na máscara de bitmap com as ferramentas de desenho de bitmap. 


* Mover os pontos de um objeto de máscara vetorial com a ferramenta Subseleção. 


Para modificar a cor da máscara selecionada, seguir um dos seguintes procedimentos: 


e No caso de máscaras de bitmap com tons de cinza, desenhar na máscara com as ferramentas de 
bitmap, usando vários valores de cor dos tons de cinza. 


e No caso de máscaras vetoriais com tons de cinza, alterar a cor do objeto de máscara. 


Nota: Usar cores mais claras para exibir os objetos com máscara e cores mais escuras para ocultá-los. 


Para modificar uma máscara adicionando mais objetos de máscara: 

1 Escolher Editar > Recortar para recortar o objeto ou objetos selecionados a serem adicionados. 
2 No painel Camadas, selecionar a miniatura do objeto com máscara. 

3 Escolher Editar > Colar como máscara. 


4 Escolher Adicionar quando for perguntado se deseja substituir a máscara existente ou adicionar 
a ela. 


O objeto ou objetos são adicionados à máscara. 


Para modificar uma máscara com as ferramentas de transformação: 
1 Selecionar a máscara na tela com a ferramenta Ponteiro. 


2 Usar uma ferramenta de transformação ou um comando do submenu Modificar > Transformar 
para aplicar uma transformação à máscara. Para mais informações sobre como usar as 
ferramentas de transformação, consultar “Transformação e distorção de objetos selecionados e 
seleções” na página 118. 


A transformação é aplicada à máscara e aos respectivos objetos com máscara. 


Nota: Existe a opção de se aplicar uma transformação spmente ao objeto de máscara. Para fazer isso, primeiro é 
necessário desvincular a máscara dos objetos de máscara no painel Camadas e, em seguida, executar a 
transformação. 


Alteração da forma de aplicação de uma máscara 


É possível usar o Inspetor de propriedades para certificar-se de que se esteja editando uma máscara e 
para identificar o tipo de máscara em que se está trabalhando. Ao selecionar uma máscara, o Inspetor 
de propriedades permite alterar a maneira como ela é aplicada. Se o Inspetor de propriedades estiver 
minimizado, será necessário clicar na seta expansora para exibir todas as propriedades. 
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Por padrão, as máscaras vetoriais são aplicadas com o uso de seu contorno de traçado. O contorno 
do traçado ou o texto é usado como máscara. Uma outra opção é mostrar o preenchimento e o 
traço da máscara. Isso produz um resultado semelhante ao uso do comando Colar em para criar 
máscaras. Para mais informações, consultar “Criação de uma máscara com base em um objeto 
existente” na página 229. 


Uma máscara vetorial a licada com o uso de seu contorno de tra ado com a opção Mostrar 
ç ç 
preenchimento e traço ativada 


A aplicação de uma máscara de bitmap com o uso de seu canal alfa permite criar uma máscara 
semelhante a uma máscara vetorial aplicada usando seu contorno de traçado. Ao se aplicar uma 
máscara com o uso de seu canal alfa, a transparência do objeto de máscara afeta a visibilidade do 
objeto que está recebendo a máscara. 


Uma máscara de bitmap aplicada com o uso de seu canal alfa 
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Máscaras vetoriais e de bitmap podem ser aplicadas com o uso da aparência dos tons de cinza. Por 
padrão, as máscaras de bitmap são aplicadas com o uso da aparência dos tons de cinza. Quando a 
máscara for aplicada com o uso da aparência dos tons de cinza, a luminosidade de seus pixels 
determinará quanto do objeto com máscara será exibido. Pixels claros exibem o objeto com 
máscara. Pixels mais escuros na máscara separam a imagem e mostram o fundo. A aplicação de 
máscaras com o uso da aparência dos tons de cinza criará efeitos interessantes se o objeto de 
máscara contiver um preenchimento dégradé ou com padrão. 


Uma máscara vetorial com preenchimento com padrão aplicada com o uso da aparência dos tons de cinza 


Além disso, há a opção de se converter máscaras vetoriais em máscaras de bitmap. No entanto, 
máscaras de bitmap não podem ser convertidas em máscaras vetoriais. 


Para mais informações sobre máscaras vetoriais e de bitmap, consultar “Sobre máscaras” na 
página 227. 

Para aplicar uma máscara vetorial com o uso de seu contorno de traçado: 

No Inspetor de propriedades, escolher Contorno do traçado quando uma máscara vetorial estiver 
selecionada. 

Para mostrar o preenchimento e o traço da máscara vetorial: 

No Inspetor de propriedades, escolher Mostrar preenchimento e traço quando estiver selecionada 
uma máscara vetorial que tenha sido aplicada com o uso de seu contorno de traçado. 

Para aplicar uma máscara de bitmap com o uso de seu canal alfa: 

No Inspetor de propriedades, escolher Canal alfa quando uma máscara de bitmap estiver 
selecionada. 

Para aplicar uma máscara vetorial ou de bitmap com o uso da aparência dos tons de cinza: 

No Inspetor de propriedades, escolher Aparência da escala de cinza quando uma máscara estiver 
selecionada. 

Para converter uma máscara vetorial em uma máscara de bitmap: 

1 No painel Camadas, selecionar a miniatura do objeto de máscara. 


2 Escolher Modificar > Nivelar seleção. 
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Adição de um objeto a uma seleção com máscara 


É possível adicionar mais objetos a uma seleção com máscara existente. 


Para adicionar outros objetos com máscara a uma seleção com máscara: 
1 Escolher Editar > Recortar para recortar o objeto ou objetos selecionados a serem adicionados. 
2 No painel Camadas, selecionar a miniatura do objeto com máscara. 
3 Escolher Editar > Colar em. 
O objeto ou objetos são adicionados aos objetos com máscara. 


Nota: O uso do comando Colar em em uma máscara existente não mostrará o preenchimento e o traço do 
objeto de máscara, a menos que a máscara original tenha sido aplicada com seu traço e preenchimento. 


Substituição, desativação e exclusão de uma máscara 


É possível substituir uma máscara por um novo objeto de máscara, bem como desativar ou excluir 
uma máscara. A desativação temporária da máscara a oculta, enquanto que a sua exclusão 
permanente a remove. 


Para substituir uma máscara: 


1 Escolher Editar > Recortar para recortar o objeto ou objetos selecionados que se deseja usar 
como máscara. 


2 No painel Camadas, selecionar a miniatura do objeto com máscara e escolher Editar > Colar 
como máscara. 


3 Clicar em Substituir quando for perguntado se deseja substituir a máscara existente ou 
adicionar a ela. 


O objeto de máscara existente é substituído pelo novo. 


Para desativar ou ativar uma máscara selecionada, seguir um dos seguintes procedimentos: 

* No menu Opções do painel Camadas, escolher Desativar máscara ou Ativar máscara. 

è Escolher Modificar > Máscara > Desativar máscara ou Modificar > Máscara > Ativar máscara. 
Um X vermelho aparece na miniatura da máscara quando ela está desativada. Clicar no X ativa 
a máscara. 

Para excluir a máscara selecionada: 

1 Para excluir a máscara, seguir um dos seguintes procedimentos: 

* No menu Opções do painel Camadas, escolher Excluir máscara. 

* Escolher Modificar > Máscara > Excluir máscara. 


e No painel Camadas, arrastar a miniatura da máscara para o ícone de lixeira. 
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2 Escolher se deseja aplicar ou descartar o efeito da máscara nos objetos com máscara antes de 
excluí-la: 


Aplicar mantém as alterações feitas no objeto, mas a máscara deixa de ser editável. Se o objeto 
que estiver recebendo a máscara for um objeto vetorial, a máscara e o objeto vetorial serão 
convertidos em uma única imagem bitmap. 


Descartar elimina as alterações feitas e restaura o objeto à sua forma original. 


Cancelar anula a operação de exclusão e deixa a máscara inalterada. 


Mistura e transparência 
Composição é o processo de variação da interação da transparência ou da cor de dois ou mais 
objetos sobrepostos. No Fireworks, os modos de mistura permitem criar imagens compostas. Os 
modos de mistura também adicionam uma dimensão de controle à opacidade de objetos e 
imagens. 

Sobre modos de mistura 


A escolha de um modo de mistura aplica esse modo a toda a aparência dos objetos selecionados. 
Objetos em um único documento ou em uma única camada podem ter modos de mistura 
diferentes de outros objetos do documento ou camada. 


Quando objetos com diferentes modos de mistura são agrupados, o modo de mistura do grupo 
substitui os modos individuais. O desagrupamento dos objetos restaura o modo de mistura 
individual de cada um deles. 


O modo de mistura contém os seguintes elementos: 

Cor de mistura é a cor à qual se aplica o modo de mistura. 

Opacidade é o grau de transparência ao qual se aplica o modo de mistura. 

Cor base é a cor dos pixels sob a cor de mistura. 

Cor resultante é o resultado do efeito do modo de mistura na cor base. 

Estes são os modos de mistura do Fireworks: 

Normal não aplica nenhum modo de mistura. 

Multiplicar multiplica a cor base pela cor de mistura, resultando em cores mais escuras. 

Tela multiplica o inverso da cor de mistura pela cor base, resultando em um efeito alvejante. 


Escurecimento seleciona a cor de mistura e a cor base mais escuras para usar como cor resultante. 
Esse procedimento substitui apenas pixels mais claros que a cor de mistura. 


Clareamento seleciona a cor de mistura e a cor base mais claras para usar como cor resultante. Esse 
procedimento substitui apenas os pixels mais escuros que a cor de mistura. 


Diferença subtrai a cor de mistura da cor base ou a cor base da cor de mistura. A cor com menos 
brilho é subtraída da cor com mais brilho. 


Matiz combina o valor de matiz da cor de mistura com a luminância e saturação da cor base para 
criar a cor resultante. 


Saturação combina a saturação da cor de mistura com a luminância e o matiz da cor base para 
criar a cor resultante. 
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Cor combina o matiz e a saturação da cor de mistura com a luminância da cor base para criar a cor 
resultante, mantendo os níveis de cinza para colorir imagens monocromáticas e tingir imagens 
coloridas. 


Luminosidade combina a luminância da cor de mistura com o matiz e a saturação da cor base. 
Inverter inverte a cor base. 
Tingir adiciona a cor cinza à cor base. 


Apagar remove todos os pixels da cor base, inclusive os da imagem de fundo. 


Exemplos do modo de mistura 


4 


Imagem original Normal Multiplicar 


Tela Escurecimento Clareamento 


Diferença Matiz Saturação 


Cor Luminosidade Inverter 


Tingir Apagar 
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Ajuste da opacidade e aplicação de uma mistura 


O Inspetor de propriedades e o painel Camadas oferecem opções de ajuste de opacidade de 
objetos selecionados e aplicação de modos de mistura. Uma configuração de opacidade de 100 
torna um objeto totalmente opaco. Uma configuração de O (zero) torna o objeto totalmente 
transparente. 


Também existe a opção de se especificar o modo de mistura e a opacidade antes de desenhar um 
objeto. 


Para especificar o modo de mistura e a opacidade antes de se desenhar um objeto: 


Com a ferramenta desejada selecionada no painel Ferramentas, definir as opções de mistura e 
opacidade no Inspetor de propriedades antes de desenhar o objeto. 


Nota: As opções de mistura e opacidade não estão disponíveis para todas as ferramentas. 


Para definir um modo de mistura e o nível de opacidade de objetos existentes: 
1 Com dois objetos sobrepostos, selecionar o objeto do topo. 


2 No menu pop-up Modo Misturar do Inspetor de propriedades ou no painel Camadas, escolher 
uma opção de mistura. 


3 Escolher uma configuração no controle deslizante pop-up Opacidade ou digitar um valor na 
caixa de texto. 


Para definir um nível de opacidade e um modo de mistura padrão para aplicar a objetos à medida 
que forem desenhados: 


1 Escolher Selecionar > Cancelar seleção para evitar a aplicação inadvertida de um modo de 
mistura e opacidade. 


2 Coma ferramenta de desenho de bitmap ou vetor selecionada, escolher um modo de mistura e 
um nível de opacidade no Inspetor de propriedades. 


O modo de mistura e o nível de opacidade escolhidos serão usados como padrão para 
quaisquer objetos subsegientes que forem desenhados com essa ferramenta específica. 


Sobre o Efeito ao vivo Cor de preenchimento 


O Fireworks também oferece um Efeito ao vivo que permite ajustar a cor de um objeto através da 
alteração de seu modo de mistura e sua opacidade. Esse Efeito ao vivo, denominado Cor de 
preenchimento, produz o mesmo efeito de uma sobreposição de um objeto com um objeto que 
tenha uma opacidade e um modo de mistura diferentes. Para mais detalhes sobre como usar o Efeito 
ao vivo Cor de preenchimento, consultar Capítulo 9, “Uso de Efeitos ao vivo”, na página 213. 
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CAPÍTULO 11 
Uso de estilo, símbolo e URL 


O Macromedia Fireworks MX oferece três painéis nos quais é possível armazenar e reutilizar 
estilos, símbolos e URLs. Os estilos, símbolos e URLs são armazenados nos painéis Estilos, 
Biblioteca e URL, respectivamente. Por padrão, todos os três painéis estão organizados no grupo 
de painéis Propriedades. 


O painel Estilos contém um conjunto de estilos predefinidos do Fireworks à sua escolha. Além 
disso, se criar uma combinação de traços, preenchimentos e outros atributos e desejar reutilizá-los, 
o usuário poderá salvar os atributos como um estilo. Em vez de reconstruir atributos, basta salvá- 
los no painel Estilos e, depois, aplicar essa combinação de atributos a outros objetos. 


O Fireworks dispõe de três tipos de símbolos: gráfico, animação e botão. Cada um apresenta 
características exclusivas para seu uso específico. O painel Biblioteca oferece opções para criar 
novos símbolos, assim como para duplicar, importar e editar símbolos. Para informações sobre 
recursos específicos incorporados aos símbolos de animação e de botão, consultar Capítulo 14, 
“Criação de animação”, na página 309 e Capítulo 13, “Criação de botões e menus pop-up”, na 
página 287. 

Um URL (Localizador uniforme de recursos, Uniform Resource Locator) é um endereço de uma 
página ou arquivo específico na Internet. Se usar o mesmo URL muitas vezes, o usuário poderá 
adicioná-lo ao painel URL. Os URLs podem ser organizados e agrupados em bibliotecas de 


URLs. 


Uso de um estilo 


Criando um estilo, o usuário pode salvar e reaplicar um conjunto de atributos predefinidos de 
preenchimento, traço, efeito e texto. Quando um estilo é aplicado a um objeto, esse objeto assume 
as características do estilo. 


O Fireworks contém vários estilos predefinidos. É possível adicionar, alterar e remover estilos. O 

CD-ROM do Fireworks e o site da Macromedia na Web contêm vários outros estilos predefinidos 
que podem ser importados para o Fireworks. Também existe a possibilidade de exportar estilos e 

compartilhá-los com outros usuários do Fireworks ou importar estilos de outros documentos do 

Fireworks. 


Nota: Não é possível aplicar estilos a objetos bitmap. 
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Aplicação de um estilo 


O painel Estilos permite criar, armazenar e aplicar estilos a objetos ou texto. 


à 


Painel Estilos 


Depois de aplicado a um objeto, o estilo poderá ser atualizado sem afetar o objeto original. O Fireworks 
não mantém um registro do estilo que foi aplicado a um objeto. Não haverá como recuperar um estilo 
personalizado se ele for excluído. Mas é possível recuperar estilos fornecidos no Fireworks, assim como 
todos os outros estilos excluídos, usando o comando Redefinir estilos no menu Opções do painel 
Estilos. No entanto, a redefinição de estilos também exclui os estilos personalizados. 

Para aplicar um estilo a um bloco de texto ou objeto selecionado: 

1 Escolher Janela > Estilos, para abrir o painel Estilos. 


2 Clicar em um estilo do painel Estilos. 


Criação e exclusão de um estilo 


É possível criar um estilo com base nos atributos de um objeto selecionado. O estilo será exibido 
no painel Estilos. 


O painel Estilos também oferece a opção de excluir estilos. 
Os atributos a seguir podem ser salvos em um estilo: 


e Core tipo de preenchimento, inclusive padrões, texturas e atributos dégradé de vetores, como 
ângulo, posição e opacidade 


e Cor e tipo de traço 

e Ffeitos 

* Atributos de texto, como fonte, tamanho do ponto, estilo (negrito, itálico ou sublinhado), 
alinhamento, suavização de serrilhado, kerning automático, kerning da faixa e entrelinhamento 

Para criar um novo estilo: 


1 Criar ou selecionar um objeto vetorial ou texto com os atributos desejados de traço, 
preenchimento, efeito ou texto. 
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Clicar no botão Novo estilo na parte inferior do painel Estilos. 
3 Escolher os atributos que deseja integrar ao estilo na caixa de diálogo Novo estilo. 


Nota: Para salvar outros atributos de texto não listados, como alinhamento, suavização de serrilhado, kerning 
automático, escala horizontal, kerning da faixa e entrelinhamento, escolher a opção Texto outro. 


4 Dar um nome ao estilo, se desejar, e clicar em OK. 


No painel Estilos, aparecerá um ícone que mostra o estilo. 


Para basear um novo estilo em um estilo existente: 
1 Aplicar o estilo existente a um objeto selecionado. 
2 Editar os atributos do objeto. 


3 Salvar os atributos criando um novo estilo, conforme descrito no procedimento anterior. 


Para excluir um estilo: 
1 Selecionar um estilo no painel Estilos. 


Manter pressionada a tecla Shift e clicar para selecionar vários estilos; manter pressionada a tecla 
Control (Windows) ou Command (Macintosh) e clicar para selecionar vários estilos não contíguos. 


2 Clicar no botão Excluir estilos no painel Estilos. 


Edição de um estilo 


Uma forma de alterar os atributos que um estilo contém é editando o estilo no painel Estilos. 


Para editar um estilo: 
1 Escolher Selecionar > Cancelar seleção para desselecionar quaisquer objetos na tela. 
2 Clicar duas vezes em um estilo no painel Estilos. 


3 Na caixa de diálogo Editar estilo, escolher ou desselecionar os componentes dos atributos que 
deseja aplicar. A caixa de diálogo Editar estilo contém as mesmas opções da caixa de diálogo 
Novo estilo. Para detalhes sobre como escolher atributos para incluir em um estilo, consultar 
“Criação e exclusão de um estilo” na página 250. 


4 Clicar em OK para aplicar as alterações ao estilo. 


Exportação e importação de um estilo 


O compartilhamento de estilos com outros usuários do Fireworks é uma maneira de economizar 
tempo e manter a consistência. Uma forma de compartilhar estilos é exportá-los para usar em 
outros computadores. 


Para exportar estilos: 
1 Selecionar um estilo no painel Estilos. 


Manter pressionada a tecla Shift e clicar para selecionar vários estilos; manter pressionada a tecla 
Control (Windows) ou Command (Macintosh) e clicar para selecionar vários estilos não contíguos. 


Escolher Exportar estilos no menu Opções do painel Estilos. 
Digitar um nome e um local para o documento que conterá os estilos salvos. 


4 Clicar em Salvar. 
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Para importar estilos: 
1 Escolher Importar estilos no menu Opções do painel Estilos. 
2 Escolher um documento de estilos para importar. 


Todos os estilos do documento de estilos são importados e inseridos diretamente após o estilo 
selecionado no painel Estilos. 


Uso de um padrão de estilo 


A redefinição do painel Estilos para o seu estado padrão exclui todos os estilos personalizados do 
painel Estilos e recupera quaisquer estilos padrão excluídos. Uma outra possibilidade oferecida é 
alterar o tamanho dos ícones exibidos no painel Estilos. 

Para redefinir o painel Estilos com os estilos padrão: 

Escolher Redefinir estilos no menu Opções do painel Estilos. 


Nota: Redefinir estilos para o padrão remove quaisquer estilos personalizados que possam ter sido salvos. 


Para alterar o tamanho dos ícones de visualização de estilo: 


Escolher Ícones grandes no menu Opções do painel Estilos, para alternar entre os tamanhos 
pequeno e grande de visualização. 


Aplicação de um atributo sem criar um estilo 


É possível copiar atributos de um objeto e aplicá-los a outros objetos, sem criar um novo estilo no 
painel Estilos. Esse método aplica rapidamente atributos a um objeto quando não se planeja 
reutilizar esses atributos em outros objetos. Os atributos que podem ser copiados e aplicados 
incluem preenchimentos, traços, efeitos e atributos de texto. 


Para copiar atributos de um objeto e aplicá-los a outros objetos: 
1 Selecionar o objeto cujos atributos deseja copiar. 
2 Escolher Editar > Copiar. 


3 Cancelar a seleção do objeto original e selecionar o objeto ou objetos aos quais deseja aplicar os 
novos atributos. 


4 Escolher Editar > Colar atributos. 


Os objetos selecionados assumem os mesmos atributos do objeto original. 


Uso de um símbolo 


O Fireworks dispõe de três tipos de símbolos: gráfico, animação e botão. Cada um apresenta 
características exclusivas para seu uso específico. Ocorrências são representações de um símbolo do 
Fireworks. Quando o objeto de símbolo (o original) é editado, as ocorrências (cópias) são 
automaticamente alteradas para refletir as modificações no símbolo. 


Os símbolos são muito úteis sempre que se deseja reutilizar um elemento gráfico. É possível 
colocar ocorrências em vários documentos do Fireworks e manter a associação ao símbolo. Os 
símbolos são úteis para criar botões e animar objetos em diversas molduras. Para mais informações 
sobre os recursos adicionais incorporados aos recursos de animação e botão, consultar “Criação de 
um símbolo de animação” na página 310 e “Criação de um símbolo de botão” na página 287. 


252 Capítulo 11 


Criação de um símbolo 


O submenu Editar > Inserir oferece opções que criam símbolos de gráfico, animação e botão. É 
possível criar um símbolo tendo como base qualquer objeto, bloco de texto ou grupo e, depois, 
organizá-los no painel Biblioteca. Para colocar ocorrências em um documento, basta arrastá-las do 
painel Biblioteca para a tela. 

Para criar um novo símbolo tendo como base um objeto selecionado: 


1 Selecionar o objeto e escolher Modificar > Símbolo > Converter em símbolo. 


2 Digitar um nome para o símbolo na caixa de texto Nome da caixa de diálogo Propriedades do 
símbolo. 


3 Escolher um tipo de símbolo: Gráfico, Animação ou Botão. Em seguida, clicar em OK. 
O símbolo aparece na biblioteca, o objeto selecionado se torna uma ocorrência do símbolo e o 
Inspetor de propriedades exibe opções de símbolo. 

Para criar um símbolo a partir do zero: 

1 Seguir um destes procedimentos: 

è Escolher Editar > Inserir > Novo símbolo. 

* Escolher Novo símbolo no menu Opções do painel Biblioteca. 

2 Escolher um tipo de símbolo: Gráfico, Animação ou Botão. Em seguida, clicar em OK. 


Dependendo do tipo de símbolo escolhido, o programa abre o Editor de símbolo ou o Editor 
de botão. 


3 Criar o símbolo com as ferramentas do painel Ferramentas e fechar o editor. 
Para mais informações, consultar “Criação de um símbolo de botão” na página 287 e “Criação de 
um símbolo de animação” na página 310. 

Posicionamento de uma ocorrência 


É possível posicionar ocorrências de um símbolo no documento atual. 


Para posicionar uma ocorrência: 


Arrastar um símbolo do painel Biblioteca para o documento atual. 


Uma ocorrência de um símbolo na tela 


Edição de um símbolo 


Quando um símbolo é modificado no Editor de símbolo, este modifica automaticamente todas as 
ocorrências associadas. 
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Nota: Para a maioria dos tipos de edições, a modificação de uma ocorrência afeta o símbolo e todas as outras 
ocorrências. Entretanto, existem algumas exceções. Para mais informações, consultar “Edição de uma ocorrência” 
na página 254. 


Para editar um símbolo e todas as suas ocorrências: 

1 Seguir um destes procedimentos para abrir o Editor de símbolo: 

e Clicar duas vezes em uma ocorrência. 

e Selecionar uma ocorrência e escolher Modificar > Símbolo > Editar símbolo. 
2 Fazer as alterações no símbolo e fechar a janela. 


O símbolo e todas as ocorrências refletem as modificações feitas. 


Para renomear um símbolo: 
1 Clicar duas vezes no nome do símbolo no painel Biblioteca. 


2 Alterar o nome na caixa de diálogo Propriedades do símbolo e clicar em OK. 


Para duplicar um símbolo: 
1 No painel Biblioteca, selecionar o símbolo. 


2 Escolher Duplicar no menu Opções do painel Biblioteca. 


Para alterar o tipo do símbolo: 
1 Clicar duas vezes no nome do símbolo na Biblioteca. 


2 Escolher uma outra opção de tipo de símbolo. 


Para selecionar todos os símbolos não usados no painel Biblioteca: 


Escolher Selecionar itens não usados no menu Opções do painel Biblioteca. 


Para excluir um símbolo: 
1 No painel Biblioteca, selecionar o símbolo. 
2 Escolher Excluir no menu Opções do painel Biblioteca. 


3 Clicar em Excluir. O símbolo e todas as suas ocorrências são excluídos. 


Edição de uma ocorrência 


Ao clicar duas vezes em uma ocorrência para editá-la, o usuário estará efetivamente editando o 
próprio símbolo no Editor de símbolo ou no Editor de botão. Para editar apenas a ocorrência 
atual, será necessário quebrar o vínculo entre ela e o símbolo. No entanto, esse procedimento 
quebra permanentemente o relacionamento entre os dois e quaisquer edições futuras feitas no 
símbolo não se refletirão na ocorrência. 


Os símbolos de botão apresentam recursos convenientes que permitem manter o relacionamento 
entre o símbolo e a ocorrência para um grupo de botões, ao mesmo tempo em que atribuem texto 
exclusivo de botão e URLs a cada ocorrência. Para mais informações, consultar “Edição de 
símbolos de botão” na página 293. 
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Quebra de um vínculo de símbolo 

É possível modificar uma ocorrência sem afetar o símbolo ou outras ocorrências. Para isso, 
primeiro é preciso quebrar o vínculo entre a ocorrência e o símbolo. 

Para liberar uma ocorrência de um símbolo: 

1 Selecionar a ocorrência. 

2 Escolher Modificar > Símbolo > Desmembrar. 


A ocorrência selecionada se torna um grupo. O símbolo no painel Biblioteca não estará mais 
associado a esse grupo. Após a separação do símbolo, uma ocorrência anterior do botão perderá 
suas características de símbolo de botão, e uma ocorrência anterior da animação perderá suas 
características de símbolo de animação. 


Edição de uma propriedade da ocorrência 


As propriedades da ocorrência especificadas a seguir podem ser modificadas sem afetar o símbolo 
ou outras ocorrências: 


* Modo de mesclagem 
* Opacidade 

e Efeitos 

è Largura e altura 


e Coordenadas X e Y 


Nota: As ocorrências de botão possuem propriedades adicionais que podem ser editadas sem afetar o símbolo. 


Para mais informações sobre edição de ocorrências de botão, consultar “Edição de símbolos de botão” na 
página 293. 


Para editar propriedades da ocorrência sem afetar o símbolo ou quebrar o vínculo com ele: 
1 Selecionar a ocorrência. 


2 Modificar propriedades da ocorrência no Inspetor de propriedades. 


Importação e exportação de um símbolo 


O painel Biblioteca armazena os símbolos de gráfico, botão e animação criados no documento 
atual. Ele também armazena os símbolos importados para o documento atual. O painel Biblioteca 
é específico do documento, mas é possível usar os símbolos de uma biblioteca em mais de um 
documento do Fireworks. Para isso, basta importar e exportar, recortar e colar ou arrastar e soltar. 


Há possibilidade de importar símbolos de outras bibliotecas, inclusive das bibliotecas que contêm 
símbolos preparados no Macromedia Fireworks e daquelas que contêm símbolos exportados 
anteriormente pelo próprio usuário ou por outras pessoas. Se, por outro lado, o usuário tiver 
criado símbolos que gostaria de reutilizar ou compartilhar, ele poderá exportar suas próprias 
bibliotecas de símbolos. Bibliotecas de símbolos são exportadas como arquivos PNG. 


Importação de um símbolo 


O submenu Editar > Bibliotecas do Fireworks MX contém bibliotecas de símbolos das quais é possível 
importar símbolos preparados de botão, gráfico e animação, assim como barras de navegação e temas 
com múltiplos símbolos. O uso desses símbolos agiliza o processo de criação de sofisticadas páginas da 
Web que contêm elementos de navegação avançados, sem a necessidade de criar símbolos originais. 
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Para importar um ou mais símbolos preparados de uma biblioteca de símbolos do Fireworks: 
1 Abrir um documento do Fireworks. 
2 Escolher Editar > Bibliotecas e escolher uma biblioteca: 
Animações abre um conjunto de símbolos com animação. 
Marcadores abre um conjunto de símbolos gráficos semelhantes a vários marcadores. 
Botões abre um conjunto de símbolos de botão do Fireworks com 2, 3 e 4 estados. 


Temas abre uma lista de símbolos de animação, gráfico e botão; cada tema consiste em um trio de 
símbolos com nome e design semelhantes e com cores coordenadas para uso em conjunto. 


Outro abre uma caixa de diálogo Abrir que dá acesso a arquivos PNG de bibliotecas de símbolos 
que foram exportados anteriormente. Para mais informações, consultar o próximo procedimento. 


Além disso, existe a opção de importar símbolos de arquivos PNG de bibliotecas que foram 
exportados anteriormente e estão localizados no disco rígido, em um CD ou em uma rede. Para 
mais informações sobre exportação de símbolos, consultar “Exportação de um símbolo” na 
página 257. 


Para importar símbolos de outro arquivo para o documento atual: 


1 Seguir um destes procedimentos: 


Escolher Importar símbolos no menu Opções do painel Biblioteca. 


Escolher Editar > Bibliotecas > Outro. 


N 


Navegar até a pasta que contém o arquivo, escolher o arquivo e clicar em Abrir. 


(o) 


Selecionar os símbolos que deseja importar e clicar em Importar. 


Os símbolos importados são exibidos no painel Biblioteca. 


Gráfico 
Gráfico 
Gráfico 
[E Logo 2 Gráfico 
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Um outro método de importar e exportar símbolos individuais de e para os painéis Biblioteca de 
vários documentos é arrastar e soltar ou copiar e colar ocorrências. 


Para importar um símbolo arrastando e soltando ou copiando e colando, seguir um destes 
procedimentos: 


e Arrastar uma ocorrência do símbolo do documento que contém o símbolo para o documento 
de destino. 
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e Copiar uma ocorrência do símbolo no documento que contém o símbolo e colá-la no 
documento de destino. 


O símbolo é importado para o painel Biblioteca do documento de destino e mantém um 
relacionamento com o símbolo do documento original. Para mais informações, consultar 
“Atualização de símbolo e ocorrência exportados em vários documentos” na página 257. 


Exportação de um símbolo 


O menu Opções do painel Biblioteca oferece a opção de exportar, em um arquivo PNG, os 
símbolos importados ou criados em um documento do Fireworks para que possam ser reutilizados 
em outros documentos. Depois, para importar os símbolos, basta usar o submenu Editar > 
Bibliotecas e navegar até o arquivo PNG que contém os símbolos. Para mais informações, 
consultar “Importação de um símbolo” na página 255. 

Para exportar símbolos: 

1 Escolher Exportar símbolos no menu Opções do painel Biblioteca. 

2 Selecionar os símbolos que deseja exportar e clicar em Exportar. 


3 Navegar até uma pasta, digitar um nome para o arquivo do símbolo e clicar em Salvar. 


O Fireworks salva os símbolos em um único arquivo PNG. 


Atualização de símbolo e ocorrência exportados em vários documentos 


O símbolo original mantém seu vínculo com todos os símbolos exportados para outros 
documentos. Dessa forma, edições feitas no símbolo no documento original alteram as 
propriedades do símbolo e da ocorrência em todos os documentos. 

Para atualizar todos os símbolos e ocorrências importados: 


1 No documento original, clicar duas vezes em uma ocorrência para abrir o editor de símbolo 
apropriado, modificar o símbolo e fechar o editor. 


2 Salvar o arquivo. 
3 No documento para o qual o símbolo foi exportado, selecionar o símbolo no painel Biblioteca. 
4 Escolher Atualizar no menu Opções do painel Biblioteca. 

Nota: Para atualizar todos os símbolos exportados, selecionar todos eles no painel Biblioteca e escolher Atualizar. 


É possível quebrar automaticamente o vínculo entre o símbolo exportado e o documento original. 
Para isso, basta editar o símbolo no documento atual. A quebra do vínculo permite a edição do 
símbolo exportado independentemente do símbolo original. 

Para quebrar o vínculo entre um símbolo exportado e o documento original: 


No documento original para o qual o símbolo foi exportado, clicar duas vezes em uma ocorrência 
do símbolo para abrir o editor de símbolo apropriado, modificar o símbolo e fechar o editor. 


O vínculo entre o símbolo no documento atual e o símbolo original está quebrado. 


Nota: O Fireworks não avisa que uma quebra do símbolo original está prestes a ocorrer. Assim, certifique-se do 
símbolo que está no documento original antes de editar um símbolo que aparece em mais de um documento. 
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Como trabalhar com um URL 


A atribuição de um URL a um objeto da Web cria um vínculo com um arquivo, como uma 
página da Web. É possível atribuir URLs a pontos ativos, botões e objetos de fatia. Se pretender 
usar os mesmos URLs diversas vezes, crie uma biblioteca de URLs no painel URL para armazenar 
os URLs. Use o painel URL para adicionar, editar e organizar seus URLs. 


Por exemplo, se o seu site na Web contiver vários botões de navegação para retornar à página 
principal, adicione o URL de sua página principal ao painel URL. A seguir, atribua esse URL a 
cada botão de navegação selecionando-o na biblioteca de URLs. O recurso Localizar e substituir 
pode alterar um URL em vários documentos (consultar “Localizar e substituir” na página 402). 


As bibliotecas de URLs estão disponíveis para todos os documentos do Fireworks e são salvas 
entre as sessões. 


Biblioteca: | URLs.htm 


| http: www. macromedia.com 


Painel URL 


Criação de uma biblioteca de URLs 


É possível agrupar os URLs em bibliotecas. Esse procedimento os mantêm juntos, facilitando o 
acesso. Os URLs podem ser salvos na biblioteca de URLs padrão, URLs.htm, ou em novas 
bibliotecas de URLs que forem criadas. 


A pasta URL Libraries, localizada no disco rígido, armazena a biblioteca URLs.htm e todas as 
novas bibliotecas criadas. A localização exata dessa pasta varia de acordo com o sistema 
operacional. Para mais informações, consultar “Como trabalhar com arquivos de configuração” na 


página 427. 

Para criar uma nova biblioteca de URLs: 

1 Escolher Nova biblioteca de URL no menu Opções do painel URL. 
2 Digitar o nome da biblioteca na caixa de texto e clicar em OK. 


O nome da nova biblioteca aparece no menu pop-up Biblioteca do painel URL. 


Para adicionar um novo URL a uma biblioteca de URLs: 
1 Escolher uma biblioteca no menu pop-up Biblioteca. 


2 Digitar um URL na caixa de texto Link. 
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3 Clicar no botão de mais (+). 


Adicionar URL 


O botão de mais (+) adiciona o URL atual à biblioteca. 


Mais tarde, para organizar ainda mais os URLs, bastará adicionar apenas aqueles que estão em uso 
no documento. 

Para adicionar um URL à biblioteca e simultaneamente atribuí-lo a um objeto da Web: 

1 Selecionar o objeto. 

2 Para inserir o URL, seguir um destes procedimentos: 


è Escolher Adicionar URL no menu Opções do painel URL, inserir um URL absoluto ou 
relativo e clicar em OK. 


e Digitar um URL na caixa de texto Link. Clicar no botão de mais (+). 

O URL aparece no painel de visualização de URL. Consultar “Atribuição de URLs” na 

página 277 e “Configuração de URL para um símbolo de botão ou ocorrência” na página 295. 
Para adicionar os URLs mais usados a uma biblioteca de URLs: 
1 Escolher uma biblioteca no menu pop-up Biblioteca. 


2 Escolher Adicionar URLs usados à biblioteca no menu Opções do painel URL. 


Para excluir um URL selecionado do painel de visualização de URL: 


Clicar no botão Excluir URL da biblioteca na base do painel URL. 


Para excluir todos os URLs não usados da biblioteca: 
1 Escolher Apagar URLs não usados no menu Opções do painel URL. 
2 Clicar em OK. 


Edição de um URL 


É simples editar URLs através do painel URL. Para isso, há duas opções à sua escolha: editar 
apenas uma única ocorrência do URL ou fazer com que as alterações se espalhem por todo o 
documento. 

Para editar um URL: 

1 Selecionar o URL que deseja editar no painel de visualização de URL. 

2 Escolher Editar URL no menu Opções do painel URL. 


3 Editar o URL. Selecionar Alterar todas as ocorrências no documento para atualizar este vínculo 
por todo o documento. 
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Sobre URLs absolutos e relativos 
No painel URL, o usuário pode digitar um URL absoluto ou relativo: 


e Se estiver vinculando a uma página da Web que esteja fora do seu site na Web, use um URL 
absoluto. 


* Se estiver vinculando a uma página da Web dentro do seu site na Web, tanto faz usar um URL 
absoluto ou um URL relativo. 


URLs absolutos são URLs completos que incluem o protocolo do servidor, que normalmente é 
http:// para páginas da Web. Por exemplo, http://www.macromedia.com/br/support/ é o URL 
absoluto da página do Suporte do Macromedia Fireworks na Web. Os URLs absolutos 
permanecem precisos, independentemente da localização do documento de origem, mas eles não 
vincularão corretamente se o documento de destino for movido. 


URLs relativos são relativos à pasta que contém o documento de origem. Estes são exemplos de 
sintaxe de navegação de URLs relativos: 


e file.htm vincula a um arquivo localizado na mesma pasta do documento de origem. 


e ../../file.htm vincula a um arquivo localizado na pasta dois níveis acima da pasta que contém o 
documento de origem. Cada ../ representa um nível. 


e himidocs/file.htm vincula a um arquivo localizado na pasta htmldocs, que está dentro da pasta 
que contém o documento de origem. 


Em geral, os URLs relativos são os mais simples de usar em vínculos com arquivos que estarão 
sempre na mesma pasta do documento atual. 


Exportação e importação de um URL 


Se o painel URL contiver URLs que deseje usar novamente em outros documentos do Fireworks, 
o usuário poderá exportá-los para uso posterior. Depois, será simples importá-los para qualquer 
outro documento do Fireworks para fácil acesso. 


Também existe a possibilidade de importar URLs referenciados em qualquer documento HTML 
existente. 

Para exportar URLs: 

1 Escolher Exportar URLs no menu Opções do painel URL. 

2 Digitar um nome de arquivo e clicar em Salvar. 


É criado um arquivo HT'ML. Esse arquivo contém os URLs exportados. 


Para importar URLs: 
1 Escolher Importar URLs no menu Opções do painel URL. 
2 Selecionar um arquivo HTML e clicar em Abrir. 


Todos os URLs contidos nesse arquivo são importados. 
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CAPÍTULO 12 
Fatias, rollovers e pontos ativos 


Fatias são os blocos básicos de construção para a criação de interatividade no Macromedia 
Fireworks MX. As fatias são objetos da Web: elas não existem como imagens, mas 
fundamentalmente como código HTML. É possível vê-las, selecioná-las e renomeá-las através da 
camada Web no painel Camadas. Este capítulo descreve os conceitos básicos que devem ser 
compreendidos sobre fatias e aborda seu uso para incorporar interatividade a páginas da Web. 


Com o uso do método de rollover arrastar e soltar para anexar interatividade a fatias, é possível 
criar com rapidez efeitos de rollover e mudança de imagens no espaço de trabalho. É possível 
visualizar os comportamento atribuídos no painel Comportamentos e criar interações mais 
complexas com o uso desse painel. 


Também é possível incorporar interatividade a páginas da Web com pontos ativos. Os pontos 
ativos são geralmente usados para criar mapas de imagens, que são gráficos contendo um certo 
número de áreas ativas que se vinculam a outras páginas da Web. Os pontos ativos também 
recebem eventos de mouse, permitindo a execução de comportamentos de JavaScript nas fatias. 


Criação e edição de fatias 


O fatiamento corta um documento do Fireworks em pedaços menores e exporta cada fatia como um 
arquivo separado. Na exportação, o Fireworks também cria um arquivo HTML que contém o código 
da tabela para a remontagem da imagem em um navegador. 


O fatiamento corta um documento em múltiplos pedaços, exportados como arquivos separados. 


O fatiamento de uma imagem apresenta pelo menos três grandes vantagens: 


Otimização Um desafio, no design gráfico para a Internet, é garantir que as imagens sejam 
descarregadas rapidamente sem sacrificar sua qualidade. O fatiamento permite otimizar cada fatia 
individual com o uso do formato de arquivo e as configurações de compressão mais apropriados. 
Para mais informações, consultar “Otimização e exportação” na página 325. 
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Interatividade É possível usar fatias para criar áreas que respondem quando o ponteiro do mouse passa 
sobre elas ou ao clicá-las. Para obter mais informações sobre como acrescentar interatividade a fatias, 
consultar “Como tornar as fatias interativas” na página 269. 


Atualização de partes de uma página da Web O fatiamento permite atualizar com facilidade 
partes de uma página da Web que sofre modificações freqüentes. Por exemplo, uma página da 
Web corporativa pode ter uma seção dedicada ao funcionário do mês que muda mensalmente. O 
fatiamento permite mudar rapidamente o nome do funcionário e a foto sem a necessidade de 
substituir a página inteira. 


Criação de objetos de fatia 


É possível criar um objeto de fatia desenhando-o com a ferramenta Fatia ou inserir uma fatia com 
base em um objeto selecionado. 


As linhas que se estendem do objeto de fatia são guias de fatia que determinam os limites dos 
arquivos da imagem separada nos quais se divide o documento na exportação. Por padrão, essas 
guias são vermelhas. 


Para inserir uma fatia retangular com base em um objeto selecionado: 


1 Escolher Editar > Inserir > Fatia. A fatia é um retângulo cuja área inclui as bordas mais 
distantes do objeto selecionado. 


2 Se mais de um objeto for selecionado, escolher como aplicar as guias de fatia: 
Único cria um único objeto de fatia que cobre todos os objetos selecionados. 


Múltiplos cria um objeto de fatia para cada objeto selecionado. 


Fireworks 


À Múltiplos itens foram selecionados. Criar uma ou múltiplas fatias? 


Para desenhar um objeto de fatia retangular: 


1 Selecionar a ferramenta Fatia. 
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2 Arrastar para desenhar o objeto de fatia. O objeto de fatia e as guias de fatia aparecem na 


Camada da Web. 


Nota: É possível ajustar a posição de uma fatia à medida que a mesma é arrastada para ser desenhada. 
Mantendo-se pressionado o botão do mouse, simplesmente manter pressionada a barra de espaço no teclado e 
arrastar a fatia para outro local da tela. Soltar a barra de espaço para continuar o desenho da fatia. 


Criação de fatias HTML 


Uma fatia HTML designa uma área de uma imagem fatiada em que aparece texto HTML normal 
no navegador. Uma fatia HTML não exporta nenhum dado de pixel de imagem, mas sim o texto 
HTML que aparece na célula da tabela definida pela fatia. 
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Fatias HTML são úteis quando se deseja atualizar rapidamente o texto que aparece na página da 
Web sem ter que criar novas imagens. 

Para criar uma fatia HTML: 

1 Desenhar um objeto de fatia e selecioná-lo. 

2 No Inspetor de propriedades, escolher HTML no menu pop-up Tipo. 

3 Clicar em Editar. 


4 Digitar o texto na janela Editar fatia HTML e formatá-lo, caso desejado, com a adição de tags 
de formatação de texto HTML. 


Editar fatia HTML 


<p>Non est quod contemnas hoc studendi genus. Mirum est ut 
animus agitatione motuque corporis excitetut. </p> 

<p>lam undique silvae et solitudo ipsumque illud silentium quod 
venationi datur magna cogitationis incitamenta sunt. </p> 


OK Cancelar 


Nota: Alternativamente, é possível adicionar tags de formatação de texto HTML ao HTML, depois de sua 
exportação, com o uso de um editor de texto ou HTML. 


5 Clicar em OK para aplicar as alterações e fechar a janela Editar fatia HTML. 
O texto e os tags de HTML digitados aparecem no arquivo PNG do Fireworks. 


Nota: A aparência das fatias de texto HTML pode variar quando visualizadas em navegadores e sistemas 
operacionais diferentes, porque o tamanho e tipo das fontes podem ser configurados no navegador. 
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Criação de fatias não retangulares 


Fatias retangulares podem ser insuficientes ao se incorporar interatividade a uma imagem não 
retangular. Se o usuário desejar acrescentar um efeito de rollover a uma fatia, por exemplo, e os 
objetos de fatia se sobrepuserem ou tiverem formas irregulares, uma fatia retangular poderá trocar 
imagens de fundo indesejadas com a imagem de troca. O Fireworks resolve este problema com o 
uso da ferramenta Fatia poligonal, que permite o desenho de fatias com qualquer forma poligonal. 


Também é possível converter traçados vetoriais em fatias para criar formas irregulares de fatias. 


Para desenhar um objeto de fatia poligonal: 
1 Selecionar a ferramenta Fatia poligonal. 


2 Clicar para posicionar os pontos vetoriais do polígono. A ferramenta Fatia poligonal desenha 
apenas segmentos de retas. 


3 Ao desenhar um objeto de fatia poligonal em torno de objetos com bordas suaves, certificar-se de 
incluir todo o objeto para evitar a criação de bordas acentuadas indesejadas no gráfico da fatia. 


4 Para interromper o uso da ferramenta Fatia poligonal, escolher uma ferramenta alternativa no 
painel de Ferramentas. Não é necessário clicar no primeiro ponto novamente para fechar o 
polígono. 

Nota: Evitar o uso de fatias poligonais em excesso, uma vez que elas exigem muito mais códigos JavaScript do 


que as fatias retangulares similares. Um grande número de fatias poligonais pode, inclusive, afetar 
negativamente o tempo de processamento do navegador da Web. 


Para criar uma fatia poligonal em um objeto vetorial ou traçado: 
1 Selecionar um traçado vetorial. 

2 Escolher Editar > Inserir > Ponto ativo. 

3 Escolher Editar > Inserir > Fatia. 


Gera-se uma fatia que se adapta ao formato do objeto vetorial. 


Visualização e exibição de fatias e guias de fatia 


É possível controlar a visibilidade de fatias e outros objetos da Web em um documento com o uso 
dos painéis Camadas e Ferramentas. Ao desativar a visibilidade da fatia para o documento inteiro, 
as guias de fatia também se ocultam. 


Com o uso do Inspetor de propriedades, é possível organizar as fatias através da atribuição de uma 
cor exclusiva para cada objeto de fatia. Também é possível alterar a cor da guia de fatia através do 
menu Exibir. 
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Visualização de fatias no painel Camadas 


Camada da Web exibe todos os objetos da Web no documento para possibilitar a seleção e 
visualização de cada um deles. 
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Para visualizar e selecionar uma fatia no painel Camadas: 
1 Selecionar Janela > Camadas para abrir o painel Camadas. 


2 Expandir a Camada da Web clicando no botão de adição (+) (Windows) ou no triângulo 
(Macintosh). 


Exibe-se a lista completa dos objetos da Web atualmente no documento em Camada da Web. 
3 Clicar em um nome de fatia para selecioná-la. 


A fatia é realçada em Camada da Web e é selecionada na tela. 


Como mostrar e ocultar fatias 


Ao ocultar uma fatia, esta se torna invisível no arquivo PNG do Fireworks. É possível ocultar 
todos ou alguns objetos da Web. Como as fatias são objetos da Web, elas são listadas em Camada 
da Web no painel Camadas, onde a visibilidade pode ser ativada ou desativada para uma fatia 
selecionada. Também é possível controlar a visibilidade da fatia através do painel Ferramentas. 
Ocultar um objeto de fatia não impede sua exportação no HTML. 

Para ocultar e mostrar fatias e pontos ativos específicos: 

1 Clicar no ícone do olho próximo aos objetos da Web específicos no painel Camadas. 


2 Clicar na coluna do olho para ativar novamente a visibilidade. O ícone do olho reaparecerá 
quando os objetos da Web estiverem novamente visíveis. 


Para ocultar ou mostrar todos os pontos ativos, fatias e guias, seguir um dos seguintes 
procedimentos: 


e No painel Ferramentas, clicar no botão Ocultar/mostrar fatias apropriado. 
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e No painel Camadas, clicar no ícone do olho próximo a Camada da Web. 
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Para exibir ou ocultar guias de fatias em qualquer exibição de documento: 


Selecionar Exibir > Guias de fatia. 


Alteração da cor de fatias e guias de fatia 


Se as cores usadas em um documento forem semelhantes à cor da fatia, a sua exibição contra os 
objetos no documento poderá ser dificultada. Para facilitar a exibição das fatias, é possível atribuir 
uma nova cor de fatia a fatias selecionadas. A atribuição de cores exclusivas a fatias individuais 
também ajuda a organizá-las. Também é possível alterar a cor das guias de fatia. 


Nota: Ao visualizar o documento, as fatias não selecionadas são visíveis como uma sobreposição branca. 


Para mudar a cor de um objeto de fatia selecionado: 


No Inspetor de propriedades, selecionar uma nova cor na caixa de cores. 


Para mudar a cor das guias de fatia: 
1 Selecionar Exibir > Guias > Editar guias. 


2 Na caixa de diálogo Guias, selecionar uma nova cor na seção Cor da fatia e clicar em OK. 


Cor: E 


Exibir guias 
Encaixar nas Guia: 
[C] Bloquear guias 


Limpar tudo 


Cor da fatia: EA 


Y 


Mostrar guia de fatia 
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Edição de fatias 


No Fireworks, é possível trabalhar com um layout de fatia como se fosse uma tabela em um 
aplicativo de processamento de texto. Ao arrastar uma guia de fatia para redimensionar uma fatia, 
todas as fatias retangulares adjacentes também se redimensionam automaticamente. Além disso, é 
possível usar o painel Ferramentas para redimensionar e transformar fatias da mesma forma que 
objetos vetoriais e de bitmap. 


Movimentação de guias de fatia para editar fatias 


As guias de fatia definem o perímetro e a posição das fatias. As guias de fatia que se estendem além dos 
objetos de fatia definem como o restante do documento será fatiado na exportação. É possível alterar o 
formato de um objeto de fatia retangular arrastando as guias de fatia que o circundam. É impossível 
redimensionar objetos de fatia não retangulares através da movimentação das guias de fatia. 


Como redimensionar um objeto de fatia arrastando suas guias de fatia 


Nota: Arrastando-se as guias de fatia que circundam um botão do Fireworks na janela do documento, a fatia que 
define a área (ou fatia) ativa para aquele botão é redimensionada. Porém, é impossível excluir a área ativa de um 
botão do Fireworks arrastando-se as guias de fatia que a circundam. 


Se múltiplos objetos de fatia estiverem alinhados ao longo de uma guia de fatia única, será possível 
arrastar aquela guia de fatia para redimensionar simultaneamente todos os objetos de fatia. 


Como redimensionar múltiplos objetos de fatia arrastando uma única guia 


Além disso, arrastando-se uma guia ao longo de uma determinada coordenada, todas as demais 
guias serão movimentadas para aquela mesma coordenada. 
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Para redimensionar uma ou mais fatias: 

1 Posicionar as ferramentas Ponteiro ou Selecionar secundário sobre uma guia de fatia. 
O ponteiro se transforma em um ponteiro de movimento de guia. 

2 Arrastar a guia de fatia até o local desejado. 


As fatias são redimensionadas automaticamente, bem como todas as fatias adjacentes. 


Para remover uma guia de fatia: 


Usar as ferramentas Ponteiro ou Selecionar secundário para arrastar a guia de fatia além da borda 
da tela. 


Para mover guias de fatia adjacentes: 
1 Pressionar a tecla Shift e arrastar uma guia de fatia ao longo das guias de fatia adjacentes. 
2 Soltar a guia de fatia no local desejado. 

Todas as guias de fatia arrastadas movem-se até esse local. 


Dica: É possível cancelar esta operação soltando a tecla Shift antes de soltar o botão do mouse. Todas as guias 
de fatia capturadas retornam às suas posições originais. 


Uso de ferramentas para editar objetos de fatia 


É possível usar as ferramentas Ponteiro, Selecionar secundário e Transformação para redefinir a 
forma de uma fatia ou redimensioná-la. É possível recortar, dimensionar, inclinar e distorcer 
fatias. 


Nota: O redimensionamento e a redefinição da forma de fatias com o uso dessas ferramentas permite criar 
sobreposições de fatias, porque o tamanho dos objetos de fatia adjacentes não se ajusta automaticamente. 
Quando as fatias se sobrepuserem, a fatia de cima terá precedência, caso haja o envolvimento de interatividade. 
Para evitar a sobreposição de fatias, usar as guias de fatia para editá-las. Para mais informações, consultar 
“Movimentação de guias de fatia para editar fatias” na página 267. 


Para editar a forma de uma fatia selecionada, executar um dos seguintes procedimentos: 


* Selecionar a ferramenta Ponteiro ou Selecionar secundário e arrastar os pontos do canto da fatia 
para modificar sua forma. 


e Usar a ferramenta Transformação para realizar a transformação desejada e pressionar Enter. 


Para mais informações sobre como usar as ferramentas de transformação, consultar 
“Transformação e distorção de objetos selecionados e seleções” na página 118. 


Nota: A transformação de uma fatia retangular pode alterar sua forma, posição ou dimensões, mas a fatia 
propriamente dita permanece retangular. 


Como usar os painéis Inspetor de propriedades ou Informações para 
editar objetos de fatia 


Também é possível alterar a posição e dimensão de um objeto de fatia numericamente com o uso 
do Inspetor de propriedades. Para mais informações sobre como alterar numericamente as 
dimensões de um objeto, consultar “Transformação de um objeto numericamente” na 

página 120. Para mais informações sobre como alterar numericamente a posição de um objeto, 
consultar “Edição de objetos selecionados” na página 116. 
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Como tornar as fatias interativas 


Os blocos de construção básicos para a criação de interatividade no Fireworks são os objetos de 
fatia. O Fireworks oferece duas maneiras para tornar as fatias interativas: 


* O método de rollover arrastar e soltar é a maneira mais fácil para tornar uma fatia interativa. É 
possível criar uma interatividade simples com rapidez simplesmente arrastando-se a alça de 
comportamento de uma fatia e soltando-a na fatia alvo. 


e O painel Comportamentos permite criar interatividades mais complexas. O painel 
Comportamentos contém uma série de comportamentos interativos que se podem acrescentar 
às fatias. É possível criar efeitos interessantes com o acréscimo de múltiplos comportamentos a 
uma fatia única. Também é possível criar interações personalizadas através da edição de 
comportamentos existentes. 


Os comportamentos no Fireworks MX são compatíveis com os comportamentos do Macromedia 
Dreamweaver MX. Ao exportar um rollover do Fireworks para o Dreamweaver, é possível editar 
comportamentos do Fireworks com a utilização do painel Comportamentos do Dreamweaver. 


Adição de interatividade simples a fatias 


O método de rollover arrastar e soltar é uma forma rápida e eficiente para a criação de efeitos de rollover 
e troca de imagem. 


Especificamente, o método de rollover arrastar e soltar permite determinar o que ocorre com uma 
fatia quando o ponteiro passa sobre ela. Denomina-se o resultado final uma imagem de rollover. 
Imagens de rollover são imagens que mudam a aparência em um navegador da Web ao se mover o 
ponteiro do mouse sobre as mesmas. 


Quando o usuário seleciona uma fatia, aparece um círculo com um retículo no centro da fatia. 
Denomina-se uma alça de comportamento. 


Fatia: GIF Nome da fatia 


Alça de comportamento 


Alça de seleção 


É possível criar efeitos de rollover e troca de imagem com facilidade arrastando-se a alça de 
comportamento de uma fatia de acionamento e soltando-a em uma fatia alvo. O acionador e o 
alvo podem ser a própria fatia. 


Os pontos ativos também têm alças de comportamento para a incorporação de efeitos de rollover. 
Para mais informações, consultar “Criação de pontos ativos” na página 282. 


Fatias, rollovers e pontos ativos 269 


Sobre rollovers 


Todos os rollovers funcionam da mesma forma. Uma imagem aciona a exibição de outra quando 
o ponteiro rola sobre a primeira. O acionador é sempre um objeto da Web: uma fatia, um ponto 
ativo ou um botão. 


O rollover mais simples troca uma imagem na Moldura 1 por uma imagem diretamente abaixo 
dela na Moldura 2. Também é possível construir rollovers mais complexos. Rollovers de troca de 
imagem podem alternar uma imagem em qualquer moldura; rollovers desmembrados exibem 
uma imagem afastada do ponteiro. 


No Fireworks, ao selecionar um objeto acionador da Web criado com o uso de uma alça de 
comportamento ou no painel Comportamentos, exibem-se todas as suas relações de 
comportamento. Por padrão, uma interação de rollover é representada por uma linha de 
comportamento azul. 


Criação de um rollover simples 


Um rollover simples troca uma imagem por outra imagem em uma moldura com o mesmo objeto 
da Web. Um rollover simples envolve somente uma fatia ou ponto ativo. 


É possível selecionar a imagem de troca em qualquer moldura. 


Para acrescentar um rollover simples a uma imagem ou objeto selecionado: 


1 Certificar-se de que a imagem ou o objeto não esteja sobre uma camada compartilhada. Para 
mais informações, consultar “Compartilhamento de uma camada” na página 226. 


2 Selecionar Editar > Inserir > Fatia para criar uma fatia no topo da imagem ou objeto. 


3 Criar uma nova moldura no painel Molduras clicando no botão Moldura nova/duplicada. 
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4 Criar, colar ou importar uma imagem para usá-la como a imagem de troca. 


Posicionar a imagem abaixo da fatia criada na etapa 1, a qual será visível mesmo que se esteja na 
Moldura 2. As fatias serão visíveis em todas as molduras. 


5 No painel Molduras, selecionar Moldura 1 para retornar à moldura com a imagem original. 


6 Selecionar a fatia e colocar o ponteiro sobre a alça de comportamento. O ponteiro se transforma 
em uma mão. 


Fatia: GIF 


Nota: É possível selecionar a fatia estando em qualquer moldura. 


7 Arrastar a alça de comportamento até a borda superior esquerda da fatia. 


Uma linha de comportamento azul se estende do centro até o canto superior esquerdo da fatia 
e a caixa de diálogo Trocar imagem aparece. 


Fatia: GIF Trocar imagem 


Trocar imagem de: 


8 No menu pop-up Trocar imagem de, selecionar a moldura na qual se localiza a imagem a ser 
trocada e clicar em OK. 


9 Clicar na guia Visualização para exibir e testar o rollover ou pressionar F12 para visualizá-lo em 
um navegador. 
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Criação de um rollover desmembrado 


Um rollover desmembrado troca uma imagem em um objeto da Web quando o ponteiro do 
mouse passa sobre outro objeto da Web. Quando o ponteiro do mouse passa sobre uma imagem 
de acionamento ou se esta é clicada, exibe-se uma imagem em um local diferente na página da 
Web. Considera-se a imagem sobre a qual passa o ponteiro como o acionador e a imagem que se 
altera o alvo. 


De forma semelhante ao que ocorre com rollovers simples, que usam apenas uma fatia, primeiro é 
necessário configurar as fatias acionador e alvo, bem como a moldura na qual residirá a imagem de 
troca. Em seguida, será possível vincular o acionador à fatia alvo com uma linha de comportamento. 


Nota: O acionador para um rollover desmembrado não pode ser uma fatia. Pontos ativos e botões também têm 
alças de comportamento que podem ser usadas para criar rollovers desmembrados. Para mais informações sobre 
pontos ativos, consultar “Criação de pontos ativos” na página 282. Para mais informações sobre botões, consultar 


“Criação de um símbolo de botão” na página 287. 


Para acrescentar um rollover desmembrado a uma imagem selecionada: 
1 Selecionar Editar > Inserir > Fatia para acrescentar uma fatia à imagem acionadora. 


Nota: Esta etapa não será necessária se o objeto selecionado for um botão ou se uma fatia ou ponto ativo já 
cobrirem a imagem. 


2 No painel Molduras, criar uma nova moldura clicando no botão Moldura nova/duplicada. 


3 Colocar uma segunda imagem, a ser usada como o alvo na nova moldura, no local desejado da 
tela. É possível colocar a imagem em qualquer lugar, exceto sob a fatia criada na etapa 1. 


4 Selecionar a imagem e, em seguida, selecionar Editar > Inserir > Fatia para acrescentar uma 
fatia à imagem. 


5 No painel Molduras, selecionar Moldura 1 para retornar à moldura com a imagem original. 


6 Selecionar a fatia, ponto ativo ou botão que cobre a área acionadora (a imagem original) e 
colocar o ponteiro sobre a alça de comportamento. O ponteiro se transforma em uma mão. 


7 Arrastar a alça de comportamento da fatia acionadora até a fatia alvo criada na etapa 4. 


A linha de comportamento se estende do centro do acionador até o canto superior esquerdo da 
fatia alvo e a caixa de diálogo Trocar imagem se abre. 


Trocar imagem 


Trocar imagem de: 
| Moldura 2 


Cancelar 


8 No menu pop-up Trocar imagem de, selecionar a moldura criada na etapa 2 e clicar em OK. 


9 Clicar na guia Visualização para exibir e testar o rollover de desmembramento. 
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Aplicação de múltiplos rollovers a uma fatia 


É possível arrastar mais de uma alça de comportamento de uma única fatia para criar múltiplas 
interações de rollover. Por exemplo, é possível acionar um rollover e um rollover desmembrado na 
mesma fatia. 


Acionamento de um comportamento de rollover e um de rollover desmembrado a partir de uma fatia 


Nota: Também é possível adicionar múltiplos comportamentos com o uso do painel Comportamentos. Para mais 
informações, consultar “Uso do painel Comportamentos para adicionar interatividade a fatias” na página 274. 


Para aplicar mais de um rollover à fatia selecionada: 


1 Arrastar uma alça de comportamento na fatia selecionada até a borda da mesma fatia ou sobre 
outra fatia. 


Arrastando-se a alça até a borda superior esquerda da mesma fatia, cria-se um rollover simples 
e, arrastando-se a alça até outra fatia, cria-se um rollover desmembrado. 


2 Selecionar a moldura da imagem de troca e clicar em OK. 


3 Para criar mais rollovers, repetir as etapas 1 e 2 tantas vezes quanto desejado. 


Remoção de um rollover arrastar e soltar 


É possível remover com facilidade um rollover arrastar e soltar de uma fatia, ponto ativo ou botão. 


Para remover um rollover arrastar e soltar de um objeto da Web ou botão selecionado: 
1 Clicar na linha de comportamento azul que se deseja remover. 


2 Clicar em OK para remover a interação de rollover. 
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Uso do painel Comportamentos para adicionar interatividade a fatias 


Além de rollovers, é possível acrescentar outros tipos de interatividade a fatias com o uso do painel 
Comportamentos. É possível criar interações personalizadas através da edição de comportamentos 
existentes. 


Nota: Embora seja possível criar rollovers simples, desmembrados e complexos com o painel Comportamentos, 
recomenda-se o método de rollover arrastar e soltar. Para mais informações, consultar “Adição de interatividade 
simples a fatias” na página 269. 


Os seguintes comportamentos estão disponíveis no Fireworks: 


Rollover simples adiciona um efeito de rollover à fatia ou objeto da Web selecionado com o uso da 
Moldura 1, como o estado Acima, e da Moldura 2, como o estado Sobre. Depois de selecionar este 
comportamento, será necessário criar uma imagem na segunda moldura com o uso da mesma fatia 
para criar o estado Sobre. A opção Rollover simples, na verdade, é um grupo de comportamentos 
que contém os comportamentos Trocar imagem e Restaurar imagem trocada. 


Trocar imagem substitui a imagem da fatia especificada pelo conteúdo de outra moldura na 
mesma fatia ou pelo conteúdo de um arquivo externo. 


Restaurar imagem trocada restaura a aparência padrão do rollover na Moldura 1. 


Definir imagem da barra de navegação define uma fatia para fazer parte de uma barra de 
navegação do Fireworks. Cada fatia que faça parte da barra de navegação deve ter este 
comportamento. A opção Definir imagem da barra de navegação, na verdade, é um grupo de 
comportamentos que contém os comportamentos Sobre na barra de navegação, Abaixo na barra 
de navegação e Restaurar barra de navegação. Por padrão, esse comportamento é definido 
automaticamente ao se usar o Editor de botão para criar um botão que inclui um estado Abaixo e 
um Sobre durante o estado Abaixo. Para mais informações sobre botões, consultar “Criação de um 
símbolo de botão” na página 287. 


Sobre na barra de navegação especifica o estado Acima para a fatia selecionada atualmente, 
quando esta faz parte de uma barra de navegação e especifica, opcionalmente, o estado Sobre 
durante o estado Abaixo. 


Abaixo na barra de navegação especifica um estado Abaixo para a fatia selecionada atualmente, 
quando esta faz parte de uma barra de navegação. 


Restaurar barra de navegação restaura todas as outras fatias na barra de navegação para o estado 
Acima. 


Definir o menu pop-up acrescenta um menu pop-up a uma fatia ou ponto ativo. Esse 
comportamento será definido automaticamente caso o usuário use o Editor de menu pop-up. 
Para mais informações, consultar “Criação de menus pop-up” na página 298. 


Definir texto da barra de status permite definir o texto para exibição na barra de status, na base da 
maioria das janelas de navegadores. 
Como acrescentar comportamentos 


Com o uso do painel Comportamentos é possível acrescentar um comportamento a uma fatia. 
Também é possível acrescentar mais de um comportamento. 
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Para acrescentar um comportamento a uma fatia selecionada com o painel Comportamentos: 


1 No painel Comportamentos, clicar no botão Adicionar comportamento. 


Botão Adicionar comportamento 


Botão Remover comportamento 


Eventos 


2 No menu pop-up Adicionar comportamento, selecionar um comportamento. Para uma 
explicação de cada comportamento, consultar “Uso do painel Comportamentos para adicionar 
interatividade a fatias” na página 274. 


Edição de comportamentos 


O painel Comportamentos também permite editar comportamentos existentes. É possível 
especificar o tipo de evento (como clicar) que aciona o comportamento. 


Nota: Não é possível alterar o evento para Rollover simples e Definir imagem da barra de navegação. 


Para alterar o evento de mouse que ativa o comportamento: 

1 Selecionar a fatia acionadora que contém o comportamento que se deseja modificar. 

Todos os comportamentos associados àquela fatia são exibidos no painel Comportamentos. 

2 Selecionar o comportamento que se deseja editar. 

3 Clicar na seta ao lado do evento e selecionar um novo evento no menu pop-up: 
onMouseOver aciona o comportamento quando o ponteiro passa sobre a área acionadora. 
onMouseOut aciona o comportamento quando o ponteiro deixa a área acionadora. 
onClick aciona o comportamento quando se clica no objeto acionador. 


onLoad aciona o comportamento quando a página da Web é carregada. 


Eventos Ações 
BETER 
onMouseOver q m 
onMouseOut 
onClick 


onLoad 
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Uso de arquivos de imagem externos para estados de rollover 


É possível usar uma imagem fora do documento atual do Fireworks como a imagem de origem 
para um estado de rollover. É possível usar GIFs, GIFs animados, JPEGs ou PNGs. Ao escolher 
um arquivo externo como a origem da imagem, aquele arquivo é trocado pela fatia alvo quando o 
rollover é acionado em um navegador da Web. 


O arquivo deve ter a mesma largura e altura da fatia pela qual está sendo trocado. Se isto não 
ocorrer, o navegador redimensionará o arquivo para que se ajuste dentro do objeto de fatia. O 
redimensionamento do arquivo poderá reduzir sua qualidade, especialmente no caso de um GIF 
animado. 


Para selecionar um arquivo de imagem externo como a origem para um estado de rollover: 


1 Nas caixas de diálogo Trocar imagem, Sobre na barra de navegação ou Abaixo na barra de 
navegação, selecionar Arquivo de imagem e clicar no ícone de pasta. 


Nota: Caso essa opção não seja vista na caixa de diálogo Trocar imagem, selecionar Mais opções e executar a 
etapa 1. 


2 Navegar até o arquivo que se deseja usar e clicar em Abrir. 


3 Se necessário, cancelar a seleção de Pré-carregar as imagens (se o arquivo externo for um GIF 
animado). 


O pré-cacheamento pode interromper a exibição de GIFs animados como estados de rollover. 
Para evitar esse problema, cancelar a seleção de Pré-carregar imagens ao configurar o rollover. 


Nota: Se o usuário planejar a exportação do documento para uso na Web, deverá certificar-se de que o arquivo 
de imagem externo seja acessível no HTML do Fireworks exportado. O Fireworks cria caminhos relativos do 
documento até os arquivos de imagem. É aconselhável colocar os arquivos externos dentro do site local antes 
de usá-los como estados de rollover no Fireworks. Em seguida, ao carregar os arquivos na Web, certificar-se de 
também carregar o arquivo de imagem externo. Para mais informações sobre o Fireworks HTML, consultar 
“Exportação de HTML” na página 352. 


Preparação de fatias para exportação 


Com o uso do Inspetor de propriedades, é possível realizar fatias interativas atribuindo-se URLs e 
molduras alvo a elas. Também é possível especificar a exibição de um texto alternativo em um 
navegador enquanto a imagem é carregada. Além disso, é possível selecionar um formato de arquivo 
de exportação para otimizar uma fatia selecionada. Se o Inspetor de propriedades estiver 
minimizado, será necessário clicar na seta de expansão, no canto inferior direito, para ver todas as 


propriedades da fatia. 
Fatia Tipo: Imagem v) [52 Link: | http:#www.meuurl.com ~| © 
|Untitled-14_r4 A | GIF WebSnap 128 v Alt: [ir para meu URL 
w|5 | x [288 | Destino: | self v 
H [ee | wfa | Pa 


Propriedades da fatia no Inspetor de propriedades 
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Com o uso do Inspetor de propriedades ou do painel Camadas, é possível atribuir nomes 
exclusivos às fatias. Na exportação, o Fireworks usa o nome especificado para nomear os arquivos 
gerados a partir do fatiamento. Se o nome de uma fatia não for inserido no Inspetor de 
propriedades ou no painel Camadas, o Fireworks nomeará as fatias automaticamente na 
exportação. É possível alterar a convenção de nomeação automática que o Fireworks usa através da 
caixa de diálogo Configuração do HTML. 


Ao exportar um documento fatiado do Fireworks, ele é exportado como um arquivo HTML e uma 
série de arquivos gráficos. É possível definir as propriedades do arquivo HTML exportado com o uso 
da caixa de diálogo Configuração do HTML. 


Atribuição de URLs 


O URL (Uniform Resource Locator, localizador uniforme de recursos) representa o endereço de 
uma página ou arquivo específicos da Internet. Ao se atribuir um URL a uma fatia, os usuários 
podem navegar até aquele endereço clicando na área definida pela fatia em seus navegadores da Web. 


Para atribuir um URL à fatia selecionada: 

No Inspetor de propriedades, digitar um URL na caixa de texto Link. 

Dica: Se o usuário desejar reutilizar os URLs, será possível criar uma biblioteca de URLs no painel URL e, em 

seguida, armazená-los nesta. Para mais informações, consultar “Como trabalhar com um URL” na página 258. 
Digitação de texto alternativo 


Texto alternativo, ou alt, aparece no marcador de lugar de imagem enquanto esta é descarregada 
da Web e também substitui as imagens que falham ao serem descarregadas. Em algumas versões 
de navegadores, o texto também aparece próximo ao ponteiro como uma dica. 


A digitação de um texto alternativo breve e claro torna-se cada vez mais importante no design para a 
Web. Um número crescente de pessoas com limitações visuais usa aplicativos de leitura de tela, os 
quais convertem o texto alternativo em voz gerada pelo computador à medida que o ponteiro do 
mouse passa sobre as imagens de uma página da Web. 


Para especificar um texto alternativo para uma fatia selecionada: 


No Inspetor de propriedades, digitar o texto na caixa de texto Alt. 


Atribuição de um alvo 


Alvo é uma moldura de página da Web ou janela de navegador da Web alternativa na qual o 
documento vinculado é aberto. É possível especificar um alvo para uma fatia selecionada no 
Inspetor de propriedades. Se o Inspetor de propriedades estiver minimizado, será necessário clicar 
na seta de expansão para ver todas as propriedades. 


Para especificar um alvo para uma fatia selecionada no Inspetor de propriedades: 


Digitar o nome da moldura HTML na caixa de texto Destino ou selecionar um alvo reservado no 
menu pop-up Destino: 

blank carrega os documentos vinculados em uma nova janela do navegador sem nome. 

“parent carrega o documento vinculado no conjunto principal de molduras ou na janela da 


moldura que contém o vínculo. Se a moldura que contém o link não estiver aninhada, o 
documento vinculado será carregado na janela inteira do navegador. 
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-self carrega o documento vinculado na mesma moldura ou janela do vínculo. Este alvo está 
subentendido e, por isso, normalmente não é necessário especificá-lo. 


“top carrega o documento vinculado na janela inteira do navegador, removendo, assim, todas as 
molduras. 


Configurações de exportação 


No Inspetor de propriedades, é possível otimizar uma fatia com a seleção de uma opção no menu 
pop-up Configurações de exportação. É possível selecionar dentre configurações de exportação 
comuns para definir rapidamente um formato de arquivo e aplicar várias configurações com 
formatos específicos. Para mais informações sobre essas configurações e como personalizá-las, 
consultar “Como usar configurações de otimização predefinidas” na página 329. 


Nomeação de fatias 


O fatiamento desmembra uma imagem em partes. Cada pedaço de cada moldura é exportado 
como um arquivo separado e, dessa forma, cada arquivo deve ter um nome. 


O Fireworks nomeia automaticamente cada arquivo de fatia no momento da exportação. É 
possível aceitar a convenção de nomeação padrão ou alterá-la, ou digitar um nome personalizado 
para cada fatia. 


Como personalizar a nomeação de arquivos de fatia 


É possível atribuir nomes específicos a fatias para que os arquivos de fatias possam ser 
identificados facilmente na estrutura de arquivos do site da Web. Por exemplo, se houver um 
botão em uma barra de navegação que retorna à página inicial, será possível atribuir o nome Znício 
à fatia. 


Para digitar um nome de fatia personalizado, executar um dos seguintes procedimentos: 


* Selecionar a fatia na tela, digitar um nome na caixa Editar nome do objeto, no Inspetor de 
propriedades, e pressionar Enter. 


* Em Camada da Web, clicar duas vezes no nome da fatia, digitar um novo nome e pressionar 
Enter. 


Não adicionar a extensão do arquivo ao nome-base. O Fireworks adiciona automaticamente as 
extensões aos arquivos de fatia no momento da exportação. 


Nomeação automática de arquivos de fatia 


Caso não seja digitado um nome de fatia no Inspetor de propriedades ou no painel Camadas, o 
Fireworks alternará para a nomeação automática. A nomeação automática atribui automaticamente 
um nome exclusivo a cada arquivo de fatia com base na convenção de nomeação padrão. 


Para nomear automaticamente um arquivo de fatia: 


Ao exportar a imagem fatiada, digitar um nome nas caixas de texto Nome do arquivo (Windows) ou 
Nome (Macintosh) na caixa de diálogo Exportar. Não adicionar uma extensão de arquivo. O 
Fireworks adiciona automaticamente as extensões aos arquivos de fatia no momento da exportação. 
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Alteração da convenção de nomeação automática padrão 


Na caixa de diálogo Configuração do HTML, guia Específico do documento, é possível alterar a 
convenção de nomeação para fatias. 

O Fireworks permite construir uma convenção de nomeação personalizada com o uso de uma 
vasta gama de opções de nomeação. É possível criar uma convenção de nomeação contendo até 
seis elementos. Um elemento pode consistir em qualquer uma das seguintes opções de nomeação 
automática. 


Opção Descrição 

Nenhum Nenhum nome é aplicado ao elemento. 

nome.doc O elemento recebe o nome do documento. 

"fatia" É possível inserir a palavra “fatia” na convenção de nomeação. 

Fatia # (1,2,3...) O elemento é numerado numérica ou alfabeticamente, de acordo com o estilo 
Fatia # (01,02,03...) escolhido. 

Fatia # (A,B,C...) 

Fatia # (A,B,C...) 

inha/coluna (r3_c2, r4_c7...) Linha (r##) e coluna (c##) designam as linhas e colunas da tabela que os 


navegadores da Web usam para reconstruir uma imagem fatiada. É possível usar 
essa informação na convenção de nomeação. 


Sublinhar O elemento usa normalmente qualquer um desses caracteres como separadores 
Ponto entre outros elementos. 

Espaço 

Hífen 


Por exemplo, se o nome do documento for meudoc, a convenção de nomeação nome.doc + 
"fatia" + Fatia # (A,B,C...) resultará em uma fatia chamada meudocfatiaA. Provavelmente, nunca 
será necessária uma convenção de nomeação utilizando todos os seis elementos. 


Se uma fatia possuir mais de uma moldura, por padrão o Fireworks adicionará um número a cada 
arquivo da moldura. Por exemplo, se for digitado o nome de arquivo de fatia personalizado início 
para um botão de três estados, o Fireworks nomeará a imagem do estado Acima como início.gif, a 
imagem do estado Sobre como início. f2.gif e a imagem do estado Abaixo como início. £3.gif. É 
possível criar uma convenção de nomeação personalizada para fatias de múltiplas molduras com o 
uso da caixa de diálogo Configuração do HTML. 


Para alterar a convenção de nomeação automática padrão: 


1 Selecionar Arquivo > Configuração do HTML para abrir a caixa de diálogo Configuração do 
HTML. 


2 Clicar na guia Específico do documento. 
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3 Na seção Nomes dos arquivos, construir a nova convenção de nomeação selecionando nas listas 


desejadas. 


Configuração do HTML 


Geral | Tabela, Específico do documento 


Nomes dos arquivos: 
Fatias: 


Por exemplo, a convenção de nomeação nome.doc + "fatia" + Fatia # (A,B,C...) apareceria da 
seguinte maneira: 


doc.name se | + | Sublinhar 


w| + |Fileira/coluna (r3_c2, r4_c ~ 


Nenhum v| + Nenhum 


v|+ | Nenhum v 


Molduras: | Sublinhar 
Exemplo: Sem título-1_r1_c2_f2.gif 


Descrição de imagem alternativa: 


[C] Múltiplas páginas de barra de nav em HTML 


v |+ |Nº da moldura (f2, f3, f4...) 


Definir padrões 


Exportar múltiplos arquivos HTML para usar em documentos HTML sem molduras. 


Incluir áreas sem fatias 


C Usar codificação UTF-8 


4 (Opcional) Para definir essas informações como o padrão para todos os novos documentos do 


Fireworks, clicar em Definir padrões. 


Nota: Tomar cuidado ao selecionar Nenhum como opção de menu para a nomeação automática de fatias. Se 
Nenhum for selecionado como a opção para os três primeiros menus, o Fireworks exportará arquivos de fatia 

que se sobregravam, resultando em um único gráfico exportado e uma tabela que exibe esse gráfico em todas 
as células. 


Definição da forma de exportação das tabelas HTML 


O fatiamento define como a estrutura da tabela HTML aparecerá quando um documento do 


Fireworks for exportado para uso na Web. 


Ao exportar um documento fatiado do Fireworks para HTML, ele é recriado com o uso de uma 
tabela HTML. Cada elemento fatiado no documento do Fireworks reside em uma célula da 
tabela. Depois de exportada, uma fatia do Fireworks migra para uma célula de tabela HTML. 


É possível especificar como uma tabela do Fireworks será reconstruída em um navegador. Dentre 
outras opções, é possível selecionar o uso de espaçadores ou ninhos de tabelas ao exportar para 


HTML: 


Espaçadores são imagens que ajudam a alinhar corretamente as células da tabela ao ser exibida 
em um navegador. 


Um ninho de tabelas é uma tabela dentro de outra. Ninhos de tabelas não usam espaçadores. 
Eles podem carregar com maior lentidão nos navegadores, mas, como não há espaçadores, é 
mais fácil para a edição de seu HTML. 


Para mais informações sobre HTML, consultar “Exportação de HTML” na página 352. 
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Para definir como exportar tabelas HTML no Fireworks: 


1 


Selecionar Arquivo > Configuração do HTML ou, na caixa de diálogo Exportar, clicar no 
botão Opções. 


Clicar na guia Tabela. 
Selecionar uma opção de espaçamento no menu pop-up Espaçar: 
Ninhos de tabelas - Sem espaçadores cria um ninho de tabelas sem espaçadores. 


Tabela simples - Sem espaçadores cria uma tabela simples sem espaçadores. Se esta opção 
estiver ativada, as tabelas poderão ser exibidas de forma incorreta em alguns casos. 


Espaçador transparente de 1 pixel usa um GIF transparente de 1 pixel por 1 pixel como 
espaçador, o qual é redimensionado, conforme necessário, no HTML. Isto gera uma linha com 
altura de 1 pixel no topo da tabela e uma coluna com largura de 1 pixel no lado direito. 


Selecionar uma cor de célula para as fatias de HTML: 
Para dar às células a mesma cor de fundo da tela do documento, selecionar Usar cor da tela. 


Para selecionar uma cor diferente, cancelar a seleção de Usar cor da tela e selecionar uma cor na 
janela pop-up de cores. 


Selecionar o conteúdo das células vazias no menu pop-up Conteúdo: 
Nenhum faz com que as células vazias permaneçam em branco. 


Imagem do espaçador coloca uma pequena imagem transparente chamada spacer.gif em 
células vazias. 


Espaço não-separável coloca um tag HTML de espaço nas células vazias. A célula aparece 
vazada. 


Nota: As células vazias ocorrerão somente se a seleção da opção Incluir áreas sem fatias, na caixa de diálogo 
Exportar, for cancelada durante a exportação. 


Clicar em OK. 


Para mais informações sobre como especificar as opções de exportação de HT'ML, consultar 
“Configuração de opções de exportação de HTML” na página 359. 
Nota: É possível especificar configurações exclusivas de exportação de tabela para objetos fatiados de cada 


documento. Ou é possível usar, na caixa de diálogo Configuração do HTML, guia Específico do documento, o 
botão Definir padrões para aplicar os padrões para todos os novos documentos. 
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Como trabalhar com pontos ativos e mapas de imagem 


Os designers da Web usam, algumas vezes, pontos ativos para tornar interativas pequenas partes 
de um gráfico interativo maior. Um ponto ativo é uma área de um gráfico da Web vinculada a um 
URL. Um mapa de imagem não é nada mais do que um gráfico sobre o qual foram colocados um 
ou mais pontos ativos. 


Clique na área 
de download: 


Mapa de imagem com pontos ativos 


Na maioria das vezes, pontos ativos e mapas de imagem dependem menos de recursos do que 
gráficos fatiados. O fatiamento pode depender mais de recursos para os navegadores da Web em 
função do código HTML adicional que devem descarregar e pela quantidade de processamento 
necessário para reconstruir os gráficos fatiados. 


Nota: É possível criar um mapa de imagem fatiada. A exportação de um mapa de imagem fatiada normalmente gera 
vários arquivos gráficos. Para mais informações sobre fatias, consultar “Criação de objetos de fatia” na página 262. 


Os pontos ativos são ideais quando se deseja vincular áreas de uma imagem a outras páginas da 
Web, não sendo necessário, porém, realçar aquelas áreas ou produzir efeitos de rollover em 
resposta à movimentação ou ações do mouse. Os pontos ativos e mapas de imagem também são 
ideais quando o gráfico no qual foram colocados os pontos ativos for melhor exportado como um 
arquivo gráfico simples; em outras palavras, a exportação do gráfico inteiro será melhorada com o 
uso do mesmo formato de arquivo e das mesmas configurações de otimização. 


Criação de pontos ativos 


Depois de identificar as áreas em um gráfico de origem que seriam pontos de navegação 
satisfatórios, criar os pontos ativos e, em seguida, atribuir vínculos URL a eles. Há duas maneiras 
de se criar pontos ativos: 


e É possível desenhar o ponto ativo em volta de uma área de destino no gráfico com o uso das 
ferramentas Ponto ativo retangular, Ponto ativo circular ou Ponto ativo poligonal (forma 
irregular). 


e É possível selecionar um objeto e inserir o ponto ativo sobre ele. 


Um ponto ativo não necessita sempre ser um retângulo ou um círculo. Também é possível criar 
pontos ativos poligonais compostos por muitos pontos. Esta pode ser uma boa abordagem ao se 
trabalhar com imagens complexas. 
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Para criar um ponto ativo retangular ou circular: 


1 No painel Ferramentas, seção Web, selecionar a ferramenta Ponto ativo retangular ou Ponto 
ativo circular. 


Web | 
a 


rw 17] Ferramenta Ponto ativo retangular (J) 


| 
E JO Ferramenta Ponto ativo circular (J) 


4 To) Ferramenta Ponto ativo poligonal (J) 


2 Arrastar a ferramenta Ponto ativo para desenhar um ponto ativo sobre uma área do gráfico. 
Manter pressionado Alt (Windows) ou Opção (Macintosh) para desenhar a partir do ponto 
central. 


Nota: É possível ajustar a posição de um ponto ativo à medida que o mesmo é arrastado para ser desenhado. 
Enquanto o botão do mouse é mantido pressionado, simplesmente deve-se manter pressionada a barra de 
espaço no teclado e, em seguida, arrastar o ponto ativo para outro local na tela. Soltar a barra de espaço para 
continuar a desenhar o ponto ativo. 


Para criar um ponto ativo de formato irregular: 
1 Selecionar a ferramenta Ponto ativo poligonal. 


2 Clicar para posicionar pontos vetoriais, como se estivesse desenhando segmentos retos com a 
ferramenta Caneta. Se o traçado for aberto ou fechado, o preenchimento definirá a área do 
ponto ativo. 

Para criar um ponto ativo traçando-se um ou mais objetos selecionados: 


1 Escolher Editar > Inserir > Ponto ativo. 


Se mais de um objeto for selecionado, aparecerá uma mensagem solicitando se o usuário deseja 
criar um ponto ativo retangular simples cobrindo todos os objetos ou múltiplos pontos ativos, 
um para cada objeto. 


Fireworks 


ativos? 


À Múltiplos itens foram selecionados Criar um ou múltiplos pontos 


2 Clicar em Unico ou Múltiplos. A Camada da Web exibe o novo ponto ativo ou pontos ativos. 


Edição de pontos ativos 


Pontos ativos são objetos da Web e, como muitos outros objetos, podem ser editados com o uso 
das ferramentas Ponteiro, Selecionar secundário e Transformar. Para mais informações sobre o uso 
dessas ferramentas para a edição de um objeto da Web, consultar “Uso de ferramentas para editar 
objetos de fatia” na página 268. 
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É possível alterar numericamente a posição e o tamanho de um ponto ativo com o uso do 
Inspetor de propriedades ou do painel Informações. Para mais informações sobre como alterar 
numericamente as dimensões de um objeto, consultar “Transformação de um objeto 
numericamente” na página 120. Para mais informações sobre como alterar numericamente a 
posição de um objeto, consultar “Edição de objetos selecionados” na página 116. 


Também é possível alterar a forma de um ponto ativo com o uso do Inspetor de propriedades. 


Para converter um ponto ativo selecionado em um ponto ativo retangular, circular ou poligonal: 


No Inspetor de propriedades, selecionar Retângulo, Círculo ou Polígono no menu pop-up Forma do 
ponto ativo. 


Preparação de pontos ativos para exportação 


É possível usar o Inspetor de propriedades para atribuir URLs, textos alternativos, destinos e 
nomes personalizados a pontos ativos. Se o Inspetor de propriedades estiver minimizado, será 
necessário clicar na seta de expansão, no canto inferior direito, para ver todas as propriedades. 


Ponto ativo Forma: | Rectangle v E Link: |http: www.meuurl.com v| © 
[ 


Alt: | Ir para meu URL | 


w: [30 x: [328 | Destino: | self x| 


le | Za 


A atribuição de propriedades a um ponto ativo é semelhante à atribuição de propriedades a uma 
fatia. Para mais informações sobre como usar o Inspetor de propriedades para atribuir URLs, 
texto alternativo, molduras de destino e nomes personalizados, consultar “Preparação de fatias 
para exportação” na página 276. 

Criação de mapas de imagem 


Após inserir vários pontos ativos no topo de um gráfico desejado, é necessário exportar o gráfico 
como um mapa de imagem para que funcione em um navegador da Web. A exportação de um 
mapa de imagem gera o gráfico eo HTML que contém as informações do mapa para os pontos 
ativos e links de URL correspondentes. 


Nota: Ao exportar, o Fireworks produz apenas mapas de imagens do lado do cliente. 
Como uma alternativa à exportação, é possível copiar o mapa de imagem na Área de transferência 
e colá-lo no Dreamweaver ou em outro editor de HTML. 
Para exportar um mapa de imagem ou copiá-lo para a Área de transferência: 
1 Otimizar o gráfico para prepará-lo para a exportação. 
Para mais informações, consultar “Sobre otimização” na página 325. 
2 Selecionar Arquivo > Exportar. 


3 Sea imagem for exportada (em vez de copiá-la para a Área de transferência), navegar até a pasta 
em que se deseja colocar o arquivo HTML e nomeá-lo. 


Se já houver uma estrutura de arquivos local construída para o site da Web, será possível salvar 
o gráfico na pasta apropriada do site a partir daqui. 


4 No menu pop-up Salvar como tipo, selecionar HTML e imagens. 
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5 Selecionar uma opção no menu pop-up HTML: 


Exportar arquivo HTML gera o arquivo HTML solicitado e os arquivos gráficos 
correspondentes, que posteriormente poderão ser importados no Dreamweaver ou em outro 


editor de HTML. 


Copiar para a área de transferência simplesmente copia o mapa de imagem para a Área de 
transferência para que seja possível colá-la posteriormente no Dreamweaver ou em outro editor 


de HTML. 
6 Para Fatias, selecionar Nenhum. 


7 Caso necessário, selecionar Colocar imagens na subpasta e navegar até a pasta apropriada (isto 
não será necessário se o usuário copiar para a Área de transferência). 


8 Clicar em Salvar para fechar a caixa de diálogo Exportar. 


Dica: Ao exportar arquivos, o Fireworks pode utilizar comentários em HTML para rotular claramente o início e o 
fim do código para mapas de imagens e outros recursos da Web criados no Fireworks. Por padrão, os 
comentários em HTML não são incluídos no código. Para incluí-los, selecionar Incluir comentários HTML na 
caixa de diálogo Configuração do HTML. 


Para mais informações sobre como colocar conteúdo exportado do Fireworks no Dreamweaver 
ou em outro editor de HTML, consultar “Uso do Fireworks com outros aplicativos” na 


página 363. 


Criação de rollovers com pontos ativos 


Com o uso do método de criação de interatividade rollover arrastar e soltar, é possível anexar com 
facilidade um efeito de rollover desmembrado a um ponto ativo, caso a área de destino seja 

definida por uma fatia. Os efeitos de rollover aplicam-se a pontos ativos de maneira semelhante a 
fatias. Para mais informações, consultar “Adição de interatividade simples a fatias” na página 269. 


Nota: Um ponto ativo pode acionar somente um rollover desmembrado. Ele não pode ser o alvo de um rollover que 
venha de outro ponto ativo ou fatia. 


Depois de criar um rollover desmembrado com um ponto ativo, a linha azul de conexão 
permanece visível somente enquanto o ponto ativo está selecionado. 


Uso de pontos ativos no topo de fatias 


É possível colocar um ponto ativo no topo de uma fatia para iniciar uma ação ou comportamento. 
Isto poderá ser desejável se houver um gráfico grande e se o usuário desejar que somente uma 
pequena parte atue como o acionador para uma ação. 
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Por exemplo, pode ser que haja um gráfico grande contendo um texto e se deseje que somente o 
texto acione uma ação ou comportamento, tal como um efeito de rollover. Será possível colocar 
uma fatia no topo do gráfico e, em seguida, um ponto ativo no topo do texto. O efeito de rollover 
será acionado simplesmente com a passagem do ponteiro do mouse sobre o texto, ainda que o 
gráfico inteiro sob a fatia seja trocado ao ocorrer o efeito de rollover. É recomendável evitar a 
criação de pontos ativos que se sobreponham a mais de uma fatia, pois isto poderá resultar em 
comportamento imprevisível. 


Para criar um acionador para um efeito de rollover com o uso de um ponto ativo no topo de uma fatia: 
1 Inserir uma fatia sobre a imagem que se deseja trocar. 


2 Criar uma nova moldura no painel Molduras e inserir uma imagem que será usada como a 
imagem de troca. Certificar-se de colocá-la debaixo da fatia inserida na etapa 1. 


3 Arrastar e soltar uma linha de comportamento do ponto ativo até a fatia que contém a imagem 
que se deseja trocar. 


A caixa de diálogo Trocar imagem se abre. 


4 Selecionar a moldura que suportará a imagem de rollover na lista Trocar imagem de e clicar em OK, 
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CAPÍTULO 13 
Criação de botões e menus pop-up 


No Macromedia Fireworks MX, é possível criar uma série de botões e menus pop-up em 
JavaScript, mesmo não conhecendo nada dessa linguagem. 


O Editor de botão do Fireworks permite navegar pelo processo de criação do botão, 
automatizando várias tarefas de criação. O resultado é um símbolo de botão apropriado. Depois 
de criar um símbolo de botão, é possível criar facilmente instâncias do símbolo para elaborar uma 
barra de navegação ou nav bar. 


O Fireworks também tem um Editor de menu pop-up que permite criar, com rapidez e facilidade, 
menus pop-up verticais ou horizontais. A guia Avançada do Editor de menu pop-up proporciona 
controle sobre o espaçamento e preenchimento de células, recuo de texto, bordas de células e 
outras propriedades. 


Ao exportar um botão ou menu pop-up, o Fireworks gera automaticamente o JavaScript 
necessário para exibi-lo em um navegador da Web. No Macromedia Dreamweaver, é possível 
inserir facilmente códigos JavaScript e HTML do Fireworks em páginas da Web ou recortar e 
colar o código em qualquer arquivo HTML. Para mais informações, consultar “Como trabalhar 
com o Macromedia Dreamweaver MX” na página 363. 


Criação de um símbolo de botão 


Botões são elementos de navegação para uma página da Web. Os botões criados no Editor de 
botão têm as seguintes características: 


* É possível elaborar praticamente qualquer objeto gráfico ou de texto em um botão. 


e É possível criar um botão do zero, converter um objeto existente em um botão ou importar 
botões já criados. 


* Um botão é um tipo especial de símbolo. É possível arrastar suas ocorrências da biblioteca de 
símbolos para dentro do documento. 


Isto permite alterar a aparência gráfica de um botão simples e atualizar automaticamente a 
aparência de todas as ocorrências do botão em uma barra de navegação. Para mais informações 
sobre símbolos, consultar “Uso de um símbolo” na página 252. 


e É possível editar o texto, URL e alvo para uma ocorrência de botão sem afetar outras 
ocorrências do mesmo botão e sem quebrar a relação símbolo-ocorrência. 


e A ocorrência do botão é encapsulada. Arrastar o botão no documento move todos os 
componentes e estados a ele associados e, assim, não existe mais a necessidade de se editar 
molduras múltiplas e complexas. 
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e Editar um botão é fácil. Basta clicar duas vezes na ocorrência na tela para poder alterá-la no 
Editor de botão ou no Inspetor de propriedades. 


* Como qualquer símbolo, os botões têm um ponto de registro. O ponto de registro é um ponto 
central que ajuda no alinhamento do texto e dos diferentes estados do botão enquanto no 
Editor de botão. 


Sobre os estados do botão 


Um botão pode ter até quatro estados. Cada estado representa a aparência do botão em resposta a 
um evento do mouse: 


O estado Acima é o padrão ou a aparência do botão "em repouso”. 


O estado Sobre é como o botão aparece quando o ponteiro se move sobre ele. Esse estado alerta os 
usuários de que o clique no mouse provavelmente resultará em uma ação. 


O estado Abaixo na maioria das vezes é a imagem do botão pressionado, representando-o depois de 
clicado. Este estado do botão normalmente representa a página da Web atual em barras de 
navegação com múltiplos botões. 


O estado Sobre durante o estado Abaixo é a aparência do botão quando o ponteiro se move sobre 
ele enquanto o botão está no estado Abaixo. Esse estado do botão normalmente mostra que o 
ponteiro está sobre o botão da página da Web atual em barras de navegação com múltiplos botões. 


Com o Editor de botão é possível criar todos esses diferentes estados do botão, bem como uma 
área para iniciar a ação do botão. 
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Uso do Editor de botão 


O Editor de botão é o local de criação e edição de um símbolo de botão em JavaScript no 
Fireworks. As guias no topo do Editor de botão correspondem aos quatro estados do botão e à 
área ativa. Às dicas em cada opção do Editor de botão ajudam a tomar decisões de design para 
todos os quatro estados do botão. 


M Botão @ 100% (2 objetos) 


Acima | Sobre | Abaixo | Sobre durante o estado Abaixo | Área ativa 


Instruções: 
Estado acima: estado normal do botão. Use as ferramentas de desenho e edição para criar o estado 
Acima do botão. Para editar vínculos ou comportamentos, primeiro selecionar a guia da área ativa. 


Importar um botão... Cancelar | Concluído | 


Editor de botão 


Criação de um botão simples com dois estados 


Com o Editor de botão é possível criar botões personalizados desenhando formas, importando 
imagens gráficas ou arrastando objetos da janela do documento. O Editor de botão conduz através 
das etapas para efetuar o controle do comportamento do botão. 


Para criar um estado Acima: 


1 


Selecionar Editar > Inserir > Novo botão para abrir o Editor de botão. 
O Editor de Botão abre o indicador de estado Acima. 
Importar ou criar o gráfico do estado Acima: 


Arrastar e soltar, ou importar, o gráfico que aparecerá como o estado do botão Acima no espaço 


de trabalho do Editor de botão. 


Usar as ferramentas de desenho para criar um gráfico ou a ferramenta Texto para criar um 
botão a partir de um texto. 


Clicar em Importar um botão e selecionar um botão predefinido editável na biblioteca de 
importação Botão. Se essa opção for selecionada, não será necessário ocupar-se da criação dos 
estados restantes do botão. Cada um dos estados do botão será preenchido automaticamente 
com os gráficos e o texto apropriados. 


Se desejado, selecionar a ferramenta Texto e criar o texto para o botão. 
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Para criar um estado Sobre: 
1 Com o Editor de botão aberto, clicar na guia Sobre. 
2 Executar um dos seguintes procedimentos para criar o estado do botão Sobre: 


e Clicar em Copiar gráfico Acima para colar uma cópia do botão do estado Acima na janela 
Sobre e, em seguida, editá-lo para alterar sua aparência. 


* Arrastar e soltar, importar ou desenhar um gráfico. 


Criação de um botão com três ou quatro estados 


Ao criar um botão, além dos estados Acima e Sobre, é possível adicionar um estado Abaixo e um estado 
Sobre durante o estado Abaixo. Esses estados adicionam dicas para usuários de páginas da Web. 


É possível criar uma barra de navegação com o uso de botões de dois estados e até mesmo um 
estado, mas somente um botão com todos os quatro estados se qualifica como um verdadeiro 
botão de barra de navegação no Fireworks. O Fireworks tem vários comportamentos de Barra de 
navegação que fazem com que os botões atuem como se apresentassem um relacionamento entre 
si. Por exemplo, é possível criar botões de barra de navegação que atuam como os botões de 
pressão em um velho auto-rádio: ao clicar em um botão, ele permanece pressionado até que outro 
botão seja clicado. 


Embora os botões de quatro estados não sejam necessários para a criação de uma barra de 
navegação, seu uso permite aproveitar os comportamentos de Barra de navegação incorporados no 
Fireworks. 


Para detalhes sobre a criação dos estados Acima e Sobre para um botão, consultar “Criação de um 
botão simples com dois estados” na página 289. 

Para criar um estado Abaixo: 

1 Com um botão de dois estados aberto no Editor de botão, clicar na guia Abaixo: 

2 Executar um dos seguintes procedimentos para criar o estado do botão Abaixo: 


e Clicar em Copiar gráfico Acima para colar uma cópia do botão do estado Abaixo e, em seguida, 
editá-lo para alterar sua aparência. 


è Arrastar e soltar, importar ou desenhar um gráfico. 


Nota: Ao inserir ou criar um gráfico para o estado Abaixo, a opção Incluir estado Abaixo na barra de navegação é 
selecionada automaticamente. Este estado do botão é para botões que fazem parte de barras de navegação. 


Para criar um estado Sobre durante o estado Abaixo: 


1 Com um botão de três estados aberto no Editor de botão, clicar na guia Sobre durante o estado 
Abaixo. 


2 Executar um dos seguintes procedimentos para criar o estado do botão Sobre durante o estado 
Abaixo: 


e Clicar em Copiar gráfico Abaixo para colar uma cópia do gráfico do estado Abaixo na janela 
Sobre durante o estado Abaixo e, em seguida, editá-lo para alterar sua aparência. 


è Arrastar e soltar, importar ou desenhar um gráfico. 
Nota: Ao inserir ou criar um gráfico para o estado Sobre durante o estado Abaixo, a opção Incluir estado Abaixo 


na barra de navegação é selecionada automaticamente. Este estado do botão é para botões que fazem parte de 
barras de navegação. 
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Uso de efeitos de chanfro para desenhar estados de botões 


À medida que o usuário cria gráficos para cada estado do botão, é possível aplicar predefinições de 
Efeitos ao vivo para a criação de aparências comuns para cada estado. Por exemplo, se o usuário criar 
um botão de quatro estados, será possível aplicar o efeito Alto relevo ao gráfico do estado Acima, o 
efeito Realçado ao gráfico do estado Abaixo e assim por diante. 


Para aplicar Efeitos ao vivo predefinidos a um símbolo de botão: 


1 


o N 


Com o símbolo de botão desejado aberto no Editor de botão, selecionar o gráfico ao qual se 
deseja adicionar um Efeito ao vivo. 


No Inspetor de propriedades. clicar no botão Adiciona efeitos. 

No menu pop-up exibido que aparece, executar um dos seguintes procedimentos: 
Selecionar Chanfro e relevo > Chanfro interno. 

Selecionar Chanfro e relevo > Chanfro externo. 


Na janela pop-up que aparece, selecionar uma predefinição de botão. As predefinições de botão 
são descritas abaixo. 


Efeito de predefinição de botão Descrição 


Alto relevo O chanfro aparece levantado a partir dos objetos subjacentes. 
Realçado As cores do botão clareiam. 


Interiorizar O chanfro aparece afundado nos objetos subjacentes. 
Invertido O chanfro aparece afundado nos objetos subjacentes e suas cores são 
clareadas. 


5 


Repetir as etapas de 1 a 4 para os estados restantes do botão, dando a cada estado um efeito 
diferente de Predefinição do botão. 
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Conversão de rollovers do Fireworks em botões 


É possível criar botões a partir de rollovers criados em versões anteriores do Fireworks. Os 
componentes são convertidos em um botão e o novo botão é colocado na biblioteca. 


Para mais informações sobre rollovers, consultar “Como tornar as fatias interativas” na página 269. 


Para converter um rollover do Fireworks em um botão: 
1 Excluir a fatia ou ponto ativo que cobre as imagens de rollover. 


2 No menu pop-up Opções de transparência, painel Molduras, selecionar Mostrar todas as 
molduras. 


3 Selecionar todos os objetos a serem incluídos no botão. 


Dica: Usar a ferramenta Selecionar atrás para selecionar os objetos que estejam ocultos atrás de outros. Para 
mais informações, consultar “Uso da ferramenta Selecionar atrás” na página 104. 


4 Selecionar Modificar > Símbolo > Converter em símbolo. 
Abre-se a caixa de diálogo Propriedades do símbolo. 
5 Digitar um nome para o símbolo na caixa de texto Nome. 
6 Selecionar o tipo de Símbolo do botão. 
7 Clicarem OK. 
O novo botão é adicionado à biblioteca. 


Dica: Também é possível converter animações de quatro molduras em botões. Basta selecionar todos os quatro 
objetos: cada um deles é colocado em seu próprio estado do botão. 


Como inserir botões em um documento 


É possível inserir ocorrências de símbolos de botão em um documento no painel Biblioteca. 


Para colocar ocorrências de um símbolo de botão em um documento: 

1 Abrir o painel Biblioteca. 

2 Arrastar o símbolo de botão no documento. 

Para colocar ocorrências adicionais de um símbolo de botão em um documento, executar um dos 
seguintes procedimentos: 


* Selecionar uma ocorrência, selecionar Editar > Clonar para colocar outra ocorrência 
diretamente na frente da ocorrência selecionada. A nova ocorrência se torna o objeto 
selecionado. 


Dica: A clonagem de ocorrências de botão é conveniente ao criar barras de navegação alinhadas, pois é 
possível mover os clones em uma direção com as setas de direção enquanto se mantém o alinhamento com a 
outra coordenada de posição. 


e Arrastar outra ocorrência de botão do painel Biblioteca para o documento. 


è Pressionar Alt e arrastar (Windows) ou pressionar Opção e arrastar (Macintosh) uma 
ocorrência na tela para criar outra ocorrência de botão. 


* Copiar uma ocorrência e colar as ocorrências adicionais. 
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Importação de símbolos de botão 


Os símbolos de botão no painel Biblioteca são específicos de documentos. Se houver um 
documento aberto com símbolos no painel Biblioteca e se usuário criar um novo documento, o 
painel Biblioteca no novo documento aparecerá vazio. Porém, há vários métodos que se podem usar 
para importar símbolos de botão no painel Biblioteca de um documento, seja de uma biblioteca, 
seja de outro documento do Fireworks. 


Para importar símbolos de botão para o painel Biblioteca de um documento, seguir um dos 
seguintes procedimentos: 

è Arrastar e soltar uma ocorrência botão de outro documento do Fireworks no documento atual. 
è Recortar e colar uma ocorrência de botão de outro documento do Fireworks no documento atual. 


e Exportar os símbolos de botão de outro documento do Fireworks para um arquivo de 
biblioteca PNG e, em seguida, importar os símbolos de botão do arquivo de biblioteca PNG 
para o documento. 


è Selecionar Editar > Bibliotecas e importar os símbolos de botão para o painel Biblioteca do 
documento a partir das bibliotecas de botão no submenu. Essas bibliotecas contêm uma grande 
variedade de símbolos de botão predefinidos preparados pela Macromedia. 


Os métodos de importação e exportação de símbolos de botão são os mesmos daqueles para 
símbolos gráficos e de animação. Para mais informações, consultar “Importação de um símbolo” 
na página 255 e “Exportação de um símbolo” na página 257. 

Edição de símbolos de botão 


Os símbolos de botão do Fireworks MX são um tipo especial de símbolo. Eles têm dois tipos de 
propriedade: algumas propriedades alteram-se em todas as ocorrências quando se edita uma 
ocorrência ou o símbolo, e outras propriedades afetam somente a ocorrência atual. 


Os símbolos de botão do Fireworks permitem desfrutar a conveniência de símbolos, 
possibilitando a edição de certas propriedades de uma ocorrência de botão, como texto, sem afetar 
as outras ocorrências. 


Edição de propriedades em nível de símbolo 


Os símbolos de botão são editados no Editor de botão. As propriedades que se alteram em uma 
ocorrência ao editar seu símbolo de botão são aquelas que seriam normalmente comuns dentre 
uma série de botões usados em uma barra de navegação ou em um site da Web: 


e Modificações na aparência gráfica, como cor e tipo de traço, cor e tipo de preenchimento, 
forma do traçado e imagens 


e Efeitos ao vivo, opacidade ou modo de mistura aplicados a objetos individuais dentro do 
símbolo de botão 


* “Tamanho e posição da área ativa 

* Comportamento do botão principal 

e Configurações de otimização e exportação 

e Vínculo URL (também disponível como uma propriedade em nível de ocorrência) 


* Moldura de destino (também disponível como uma propriedade em nível de ocorrência) 
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Para editar as propriedades do botão em nível de símbolo: 
1 Executar um dos seguintes procedimentos para abrir o botão no Editor de botão: 
e Clicar duas vezes em uma ocorrência de botão no espaço de trabalho. 


e No painel Biblioteca, clicar duas vezes na visualização do botão ou no ícone do símbolo ao lado 
do símbolo do botão. 


2 Efetuar as alterações nas características gráficas do botão e clicar em Concluído. 


As alterações aplicam-se a todas as ocorrências do símbolo de botão. 


Edição de propriedades em nível de ocorrência 


As propriedades em nível de ocorrência são editadas no Inspetor de propriedades quando se 
seleciona uma ocorrência única. As propriedades que se podem alterar para uma ocorrência sem 
afetar o símbolo associado, ou nenhuma outra ocorrência daquele símbolo, são aquelas que 
normalmente diferem de um botão para outro em uma série de botões: 


* O nome de objeto de uma ocorrência que aparece no painel Camadas e é usado para nomear as 
fatias exportadas para a ocorrência de botão na exportação 


e Efeitos ao vivo, opacidade ou modo de mistura aplicados à ocorrência inteira 

e Caracteres de texto e formatação de texto, como fonte, tamanho, orientação e cor 

e Vínculo URL (também disponível como uma propriedade em nível de símbolo) 

e Descrição alternativa (alt) de imagem 

* Moldura de destino (também disponível como uma propriedade em nível de símbolo) 


* Comportamentos adicionais atribuídos a uma ocorrência com o uso do painel 
Comportamentos 


* A opção Mostrar Abaixo ao carregar, no Inspetor de propriedades, para ocorrências dentro de 
uma barra de navegação 


Nota: No Fireworks MX, não é necessário selecionar a opção Mostrar Abaixo ao carregar para cada ocorrência 
de botão em uma barra de navegação. A seção Específico do documento, na caixa de diálogo Configuração do 
HTML, contém uma opção denominada Exportar múltiplos arquivos. Quando o usuário seleciona essa opção e, 
em seguida, exporta uma barra de navegação, o Fireworks MX exporta cada página de HTML com o estado de 
botão Abaixo correspondente. Para mais informações, consultar “Configuração de opções de exportação de 
HTML” na página 359. 


Botão Texto: | Link: v|O 
| Símbolo: sim | Mm | GIF WebSnap 128 {y Alt: 

w:/258 | [408 || Efo [moma v] Destino: w 

Hluo | v: ES [ ] Mostrar Abaixo ao carregar Vas 


Para editar propriedades em nível de ocorrência de uma ocorrência única de símbolo de botão: 
1 Selecionar a ocorrência de botão no espaço de trabalho. 


2 Definir as propriedades no Inspetor de propriedades. 
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Configuração de propriedades de botão interativo 


Com o Fireworks, é possível controlar os elementos interativos de um botão, inclusive a área ativa, 
URL, destino e descrição alternativa (alt) de imagem. 


Modificação da área ativa de um símbolo de botão 


A área ativa de um símbolo de botão aciona a interatividade quando um usuário move o ponteiro 
sobre ele ou o clica em um navegador da Web. A área ativa de um botão é uma propriedade em 
nível de símbolo e é exclusiva para símbolos de botão. 


Ao se criar um símbolo de botão, o Fireworks cria automaticamente uma fatia especial grande o 
suficiente para incluir todos os estados de um botão. É possível editar a fatia de um botão somente 
na guia Área ativa do Editor de botão. Cada botão pode ter somente uma fatia. Se uma fatia for 
desenhada com o uso de uma ferramenta de fatia na área ativa, a fatia anterior será substituída 
pela nova fatia desenhada. É possível desenhar objetos de ponto ativo na guia Área ativa, mas 
somente é possível editá-los no Editor de botão. 

Nota: Objetos da Web que definem a área ativa de um símbolo de botão aparecem no documento quando fatias e 


pontos ativos não estão ocultos, mas os objetos da Web de um botão não são listados no painel Camadas, nem 
podem ser editados no espaço de trabalho. 


Para editar uma fatia ou ponto ativo na área ativa de um símbolo de botão: 
1 Executar um dos seguintes procedimentos para abrir o símbolo de botão no Editor de botão: 
e Clicar duas vezes em uma ocorrência de botão no espaço de trabalho. 


e No painel Biblioteca, clicar duas vezes na visualização do botão ou no ícone do símbolo ao lado do 
símbolo do botão. 


2 Clicar na guia Área ativa. 
3 Seguir uma das seguintes opções: 
e Usar a ferramenta Ponteiro para mover ou alterar a forma da fatia ou mover a guia da fatia. 


e Usar uma das ferramentas de fatia ou ponto ativo para desenhar uma nova área ativa. 


Configuração de URL para um símbolo de botão ou ocorrência 


Um URL (Uniform Resource Locator, localizador uniforme de recursos) é um vínculo para outra 
página da Web, site da Web ou âncora na mesma página da Web. O URL pode ser uma 
propriedade de botão em nível de símbolo ou ocorrência. É possível anexar um URL a uma 
ocorrência de botão selecionada no Inspetor de propriedades ou no painel URL. 


É possível anexar um URL a um símbolo para que o mesmo URL apareça na caixa de texto Link 
no Inspetor de propriedades para cada ocorrência. Isto é útil ao se digitar URLs absolutos dentro 
de um site; basta completar a última parte do URL na caixa de texto Link de cada ocorrência no 
Inspetor de propriedades para vincular as ocorrências de botão. 


Nota: Para mais informações sobre URLs estáticos versus relativos, consultar “Sobre URLs absolutos e relativos” 
na página 260. 


Para definir o URL para um símbolo de botão no Editor de botão: 
1 Executar um dos seguintes procedimentos para abrir o botão no Editor de botão: 


e Clicar duas vezes em uma ocorrência de botão no espaço de trabalho. 
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e No painel Biblioteca, clicar duas vezes na visualização do botão ou no ícone do símbolo ao lado do 
símbolo do botão. 


No Editor de botão, clicar na guia Área ativa. 


Selecionar a fatia ou ponto ativo na Área ativa. 


Aa O N 


Seguir uma das seguintes opções: 

* No Inspetor de propriedades, digitar o URL na caixa de texto Link. 

* No painel URL, selecionar um URL. 

Nota: A alteração do URL para um símbolo de botão não altera o URL para as ocorrências de botão daquele 


símbolo existentes que já possuam URLs exclusivos atribuídos às mesmas. Isto também se aplica às alterações 
feitas ao destino e ao texto alternativo de um símbolo de botão. 


Para definir o URL para uma ocorrência de botão selecionada no espaço de trabalho, executar um 
dos seguintes procedimentos: 
e No Inspetor de propriedades, digitar o URL na caixa de texto Link. 


e No painel URL, selecionar um URL. 


Configuração de destino para um botão 


Destino é a janela ou moldura na qual a página da Web de destino aparece ao se clicar em uma 
ocorrência de botão. Se o usuário não digitar um destino no Inspetor de propriedades, a página da 
Web aparecerá na mesma moldura ou janela do link que a chamou. O destino por ser uma 
propriedade de botão em nível de símbolo ou ocorrência. É possível definir o destino para um 
símbolo de modo que todas as ocorrências do símbolo tenham a mesma opção de destino. 

Para definir o destino para um símbolo de botão no Editor de botão: 

1 Executar um dos seguintes procedimentos para abrir o botão no Editor de botão: 


e Clicar duas vezes em uma ocorrência de botão no espaço de trabalho. 


e No painel Biblioteca, clicar duas vezes na visualização do botão ou no ícone do símbolo ao lado do 
símbolo do botão. 


2 Executar um dos seguintes procedimentos no Inspetor de propriedades: 

* No menu pop-up Destino, selecionar um destino predefinido: 
Nenhum ou self carrega a página da Web na mesma moldura ou janela do vínculo. 
blank carrega a página da Web em uma nova janela do navegador sem título. 


-parent carrega a página da Web no conjunto principal de molduras ou na janela da moldura 
que contém o vínculo. 


“top carrega a página da Web na janela inteira do navegador, removendo todas as molduras. 
e Na caixa de texto Destino, digitar um destino. 
Nota: A alteração do destino para um símbolo de botão não altera o destino para as ocorrências de botão 


daquele símbolo existentes que já possuam destinos exclusivos atribuídos às mesmas. Isto também se aplica às 
alterações feitas ao URL e ao texto alternativo de um símbolo de botão. 


Para definir o destino para uma ocorrência de botão no espaço de trabalho: 


1 Selecionar a ocorrência de botão no espaço de trabalho. 


296 Capítulo 13 


2 No Inspetor de propriedades, executar um dos seguintes procedimentos: 

* No menu pop-up Destino, selecionar um destino predefinido: 
Nenhum ou self carrega a página da Web na mesma moldura ou janela do vínculo. 
blank carrega a página da Web em uma nova janela do navegador sem título. 


parent carrega a página da Web no conjunto principal de molduras ou na janela da moldura 
que contém o vínculo. 


“top carrega a página da Web na janela inteira do navegador, removendo todas as molduras. 


e Na caixa de texto Destino, digitar um destino. 


Configuração de texto alternativo (alt) para um símbolo ou ocorrência de 
botão 


O texto alternativo (alt) aparece no ou próximo a um marcador de lugar de imagem enquanto esta 
é descarregada da Web ou no lugar dela caso ocorra uma falha no descarregamento. Ele também 
substitui os gráficos caso o usuário tenha configurado o navegador para não exibir imagens. O 
texto alternativo pode ser uma propriedade de botão em nível de símbolo ou ocorrência. É 
possível definir um texto alternativo para um símbolo ou ocorrência de botão no Inspetor de 


propriedades. 


Nota: As aplicações que auxiliam as pessoas portadoras de limitação visual lêem o texto alternativo para gráficos 
ou páginas da Web em um navegador. Sempre que possível, é recomendável digitar um texto alternativo conciso e 
explicativo. 


Para definir um texto alternativo para um símbolo de botão no Editor de botão: 
1 Executar um dos seguintes procedimentos para abrir o botão no Editor de botão: 
e Clicar duas vezes em uma ocorrência de botão no espaço de trabalho. 


e No painel Biblioteca, clicar duas vezes na visualização do botão ou no ícone do símbolo ao lado 
do símbolo do botão. 


2 No Inspetor de propriedades, digitar o texto desejado para aparecer como texto alternativo em 
um navegador. 


Nota: A alteração do texto alternativo para um símbolo de botão não altera o texto para as ocorrências de botão 
daquele símbolo existentes que já possuam textos alternativos exclusivos atribuídos às mesmas. Isto também se 
aplica às alterações feitas ao destino e ao URL de um símbolo de botão. 


Para definir um texto alternativo para uma ocorrência de botão no espaço de trabalho: 
1 Selecionar a ocorrência de botão no espaço de trabalho. 


2 Na caixa de texto Alt do Inspetor de propriedades, digitar a descrição. 


Criação de barras de navegação 


A barra de navegação, ou nav bar, é um grupo de botões que oferece vínculos para diferentes áreas 
de um site da Web. Ela normalmente permanece consistente em todo o site, proporcionando um 
método de navegação constante, independentemente da localização do usuário dentro do site. A 
aparência da barra de navegação é a mesma de uma página da Web para outra, mas em alguns 
casos os vínculos podem ser específicos para a função de cada página. 


No Fireworks, o usuário elabora uma barra de navegação através da criação de um símbolo de 
botão no Editor de botão e da colocação das ocorrências daquele símbolo no espaço de trabalho. 
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Para criar uma barra de navegação básica: 

1 Criar um símbolo de botão. Para mais informações, consultar “Criação de um símbolo de 
botão” na página 287. 

2 Arrastar (copiar) uma ocorrência do símbolo do painel Biblioteca para o espaço de trabalho. 

3 Executar um dos seguintes procedimentos para fazer uma cópia da ocorrência de botão: 


e Selecionar a ocorrência de botão e selecionar Editar > Clonar. 


è Pressionar Alt e arrastar (Windows) ou pressionar Opção e arrastar (Macintosh) a ocorrência de 
botão. 


Cria-se uma cópia da ocorrência de botão. 


4 Manter a tecla Shift pressionada à medida que se pressiona uma tecla de direção repetidamente 
para posicionar o botão clonado. Para um controle mais preciso, usar as teclas de direção sem 
pressionar Shift. 


5 Repetir as etapas 3 e 4 para criar ocorrências de botão adicionais. 


6 Selecionar cada ocorrência e atribuir à mesma um texto, URL e outras propriedades exclusivas 
com o uso do Inspetor de propriedades. 


Criação de menus pop-up 


Menus pop-up são menus que se exibem em um navegador em resposta a um movimento do 
ponteiro sobre, ou um clique do mouse em, um objeto acionador da Web, como uma fatia ou 
ponto ativo. Os itens de menus pop-up podem ter vínculos de URL anexados aos mesmos para 
navegação. Por exemplo, é possível usar menus pop-up para organizar várias opções de navegação 
relacionadas a um botão em uma barra de navegação. É possível criar submenus em menus pop- 
up para tantos níveis quanto desejados. 


Cada item de menu pop-up aparece como uma célula de HT'ML ou imagem com um estado 
Acima, um estado Sobre e texto em ambos os estados. Para visualizar um menu pop-up em um 
navegador, é necessário pressionar F12. A guia Visualização, no espaço de trabalho do Fireworks 
MX, não exibe menus pop-up. 


Sobre o Editor de menu pop-up 


O Editor de menu pop-up é uma caixa de diálogo com guias que orienta o usuário no processo de 
criação de um menu pop-up. Suas várias opções para o controle das características de um menu pop-up 
são organizadas em quatro guias: 


Conteúdo contém as opções que determinam a estrutura básica do menu, bem como o texto, 
vínculo de URL e destino para cada item do menu. 


Aparência contém opções que determinam a aparência dos estados Acima e Sobre de cada célula 
do menu, bem como a orientação, vertical ou horizontal, do menu. 


Avançada contém opções que determinam a dimensão, preenchimento e espaçamento das células, 
a largura e a cor da borda das células, a espera do menu e o recuo do texto. 


Posição contém opções que determinam o posicionamento do menu e submenus: 


e A configuração do menu posiciona o menu pop-up em relação à fatia. As posições predefinidas 
incluem: no fundo, no canto inferior direito, no topo e no canto superior direito de uma fatia. 


298 Capítulo 13 


e A configuração do submenu posiciona o submenu pop-up à direita ou canto inferior direito do 
menu principal, ou abaixo dele. 


Editor de menu pop-up 


Conteúdo | aparência | Avançada | Posição 


+ 


Texto Destino 


North America 
United States [htipsttmmmacromediacom | |] 
Canada http:Hwww.macromedia.com 

LatinfSouth America http:Hwww.macromedia.com 

Europe http: www. macromedia.com 


http: www. macromedia.com Do 


Middle East http: www. macromedia.com 
BsialPacific http:Hwww.macromedia.com 


Cancelar ltar Próximo > Concluído 


Dependendo do design do menu pop-up, nem todas as guias ou opções poderão ser usadas no 
Editor de menu pop-up. É possível editar configurações em qualquer guia e a qualquer momento, 
mas será necessário adicionar pelo menos um item de menu na guia Conteúdo para criar um 
menu que possa ser visualizado em um navegador. 


Criação de um menu pop-up básico 
A guia Conteúdo, do Editor de menu pop-up, é o local no qual se determinam a estrutura e o 
conteúdo básicos do menu pop-up. As configurações atuais ou padrão das opções nas outras guias 
do Editor de menu pop-up aplicam-se ao menu ao criá-lo. 
Para criar um menu pop-up simples: 
1 Selecionar um ponto ativo ou fatia que será a área acionadora para o menu pop-up. 
2 Executar um dos seguintes procedimentos para abrir o Editor de menu pop-up: 
è Selecionar Modificar > Menu pop-up > Adicionar menu pop-up. 
e Clicar na alça de comportamento no centro da fatia e selecionar Adicionar menu pop-up. 
3 Clicar na guia Conteúdo. 

[+] 4 Clicar no botão Adicionar menu para adicionar um item de menu vazio. 


É possível adicionar e excluir células a qualquer momento. 
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Clicar duas vezes em cada célula e digitar ou selecionar a informação apropriada: 
Texto especifica o texto para o item de menu. 


Link determina o URL do item de menu. É possível digitar um vínculo personalizado ou 
selecionar um no menu pop-up Link, caso haja algum disponível. Se forem inseridos URLs 
para outros objetos da Web no documento, esses URLs serão listados no menu pop-up Link. 


Destino designa o destino para o URL. É possível digitar um destino personalizado ou 
selecionar um existente no menu pop-up Destino. 


A digitação do conteúdo no último campo da janela adicionará automaticamente uma linha 
vazia abaixo dele. 


Dica: Para navegar de uma célula ativa para outra e continuar a inserir informações, pressionar a tecla Tab para se 
movimentar entre as células e as teclas Seta para cima e Seta para baixo para rolar verticalmente através da lista. 


Repetir as etapas 4 e 5 até adicionar todos os itens de menu. 
Opcionalmente, para se excluir um item de menu, realçá-lo e clicar no botão Excluir menu. 
Seguir uma das seguintes opções: 


Clicar em Próximo para ir para a guia Aparência ou selecionar outra guia para continuar a 
construção do menu pop-up. 


Criar entradas de submenu para o menu pop-up. Para mais informações, consultar “Criação de 
submenus dentro de um menu pop-up” na página 300. 


Clicar em Concluído para completar o menu pop-up e fechar o Editor de menu pop-up. 


No espaço de trabalho, o ponto ativo ou fatia no qual o menu pop-up foi construído exibe uma 
linha azul de comportamento anexada a um contorno do nível superior do menu pop-up. 


Nota: Para exibir um menu pop-up, é necessário pressionar F12 para visualizá-lo em um navegador. A guia 
Visualização, no espaço de trabalho do Fireworks MX, não exibe menus pop-up. 


Criação de submenus dentro de um menu pop-up 


Com o uso dos botões Recuar menu e Recuar menu para fora, na guia Conteúdo do Editor de 
menu pop-up, é possível criar submenus, que são menus pop-up que aparecem quando o ponteiro 
se move sobre ou se clica em outro item do menu pop-up. É possível criar tantos níveis de 
submenus quanto desejados. 


Para criar um submenu pop-up: 


1 


No Editor de menu pop-up, abrir a guia Conteúdo e criar itens de menu. Criar os itens de 
menu que se deseja usar para o submenu e colocá-los diretamente sob o item de menu para o 
qual eles serão um submenu. Para mais informações, consultar “Criação de um menu pop-up 
básico” na página 299. 


Clicar para realçar um item de menu pop-up que se deseja transformar em um item de submenu. 


Clicar no botão Recuar menu para designar o item como um item de submenu do item 
diretamente acima dele na lista de itens de menu. 


Para adicionar o próximo item ao submenu, realçá-lo e clicar em Recuar menu. 
Todos os itens recuados contiguamente no mesmo nível constituem um submenu pop-up simples. 


Opcionalmente, realçar um item de menu ou submenu e clicar em Adicionar menu para inserir 
um novo item imediatamente abaixo do item realçado. 
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Executar uma das seguintes opções: 


Clicar em Próximo para ir para a próxima guia ou selecionar outra guia para continuar a 
construção do menu pop-up. 


Clicar em Concluído para fechar o Editor de menu pop-up. 


Para criar um submenu pop-up dentro de um submenu pop-up: 


1 


Na guia Conteúdo do Editor de menu pop-up, realçar um item de submenu. Para mais 
informações, consultar o procedimento anterior. 


Clicar no botão Recuar menu para recuá-lo novamente, para que fique recuado em relação ao 
item de submenu imediatamente acima dele. 


É possível continuar o recuo para criar submenus dentro de submenus para tantos níveis quanto 
desejados. 


Para mover um item de menu para um submenu de nível mais alto ou para dentro do menu pop-up 


principal: 

1 Na guia Conteúdo do Editor de menu pop-up, realçar o item de menu. 

2 Clicar no botão Recuar o menu para fora. 
Para mais informações sobre como posicionar submenus, consultar “Posicionamento de menus 
e submenus pop-up” na página 306. 

3 Executar um dos seguintes procedimentos para completar o menu pop-up ou continuar a 


construí-lo: 


Clicar em Próximo para ir para a guia Aparência ou selecionar outra guia para continuar a 
construção do menu pop-up. 


Clicar em Concluído para fechar o Editor de menu pop-up. 


No espaço de trabalho, o ponto ativo ou fatia no qual o menu pop-up foi construído exibe uma 
linha azul de comportamento anexada a um contorno do nível superior do menu pop-up. 


Nota: Para exibir um menu pop-up, é necessário pressionar F12 para visualizá-lo em um navegador. A guia 
Visualização, no espaço de trabalho do Fireworks MX, não exibe menus pop-up. 
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Criação da aparência de um menu pop-up 


Depois de criar um menu básico e submenus opcionais, é possível formatar o texto, aplicar estilos 
gráficos aos estados Sobre e Acima, e selecionar a orientação, vertical ou horizontal, na guia 
Aparência do Editor de menu pop-up. 


Editor de menu pop-up 


Conteúdo | Aparência Avançada | Posição, 


Células: ()HTML (O) Imagem [ Menu vertical 


Fonte: | Verdana, Arial, Helvetica, sans-serif v 


Tamanho:|12 N1I = 
Estado Acima: Estado Sobre: 
Texto: E Célula: | Temo: | 4 Célula: E 


North America 
pus a America 


Cancelar < Voltar Prósimo> | | Concluído 


Para definir a orientação de um menu pop-up: 
1 Como menu pop-up desejado aberto no Editor de menu pop-up, clicar na guia Aparência. 


Para mais informações sobre como abrir um menu pop-up existente no Editor de menu pop- 
up, consultar “Edição de menus pop-up” na página 307. 


2 Selecionar Menu vertical ou Menu horizontal no menu pop-up. 


Para definir se o menu pop-up é baseado em HTML ou imagem: 
1 Como menu pop-up desejado aberto no Editor de menu pop-up, clicar na guia Aparência. 


Para mais informações sobre como abrir um menu pop-up existente no Editor de menu pop- 
up, consultar “Edição de menus pop-up” na página 307. 
2 Selecionar uma opção em Células: 


HTML define a aparência do menu somente com o uso de código HTML. Esta definição 
produz páginas com tamanhos de arquivo menores. 


Imagem oferece uma seleção de estilos de imagem gráfica para uso como o fundo das células. 
Esta definição produz páginas com tamanhos de arquivo maiores. 


Nota: É possível adicionar estilos de menu pop-up personalizados a esta seleção. Para mais informações, 
consultar “Adição de estilos de menu pop-up” na página 308. 
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Para formatar o texto no menu pop-up atual: 


1 


Com o menu pop-up desejado aberto no Editor de menu pop-up, clicar na guia Aparência. 


Para mais informações sobre como abrir um menu pop-up existente no Editor de menu pop- 
up, consultar “Edição de menus pop-up” na página 307. 


Selecionar um tamanho predefinido no menu pop-up Tamanho ou digitar um valor na caixa 
de texto Tamanho. 


Nota: Quando a largura e a altura das células são definidas em Automática na guia Avançada do Editor de menu 
pop-up, o tamanho do texto determina o tamanho dos gráficos associados ao item de menu. 


Selecionar um grupo de fontes do sistema no menu pop-up Fonte ou digitar o nome de uma 
fonte personalizada. 


Nota: Tomar cuidado ao selecionar uma fonte. Se os usuários que visualizarem a página da Web não tiverem a 
fonte selecionada instalada em seus sistemas, uma fonte de substituição será exibida nos respectivos 
navegadores da Web. 

Opcionalmente, clicar em um botão de estilo de texto para aplicar um estilo negrito ou itálico. 
Clicar em um botão de justificação para alinhar o texto à esquerda ou à direita, ou para centralizá-lo. 


Na caixa Texto, selecionar uma cor para o texto. 


Para definir a aparência das células do menu: 


1 


Aa O N 


Com o menu pop-up desejado aberto no Editor de menu pop-up, clicar na guia Aparência. 


Para mais informações sobre como abrir um menu pop-up existente no Editor de menu pop- 
up, consultar “Edição de menus pop-up” na página 307. 


Selecionar as cores do texto e das células para cada estado. 
Se Imagem for selecionado como o tipo das células, selecionar um estilo gráfico para cada estado. 
Seguir uma das seguintes opções: 


Clicar em Próximo para ir para a guia Avançada ou selecionar outra guia para continuar a 
construção do menu pop-up. 


Clicar em Concluído para fechar o Editor de menu pop-up. 


No espaço de trabalho, o ponto ativo ou fatia no qual o menu pop-up foi construído exibe uma 
linha azul de comportamento anexada a um contorno do nível superior do menu pop-up. 


Nota: Para exibir um menu pop-up, é necessário pressionar F12 para visualizá-lo em um navegador. A guia 
Visualização, no espaço de trabalho do Fireworks MX, não exibe menus pop-up. 


Adição de estilos de menu pop-up 


É possível adicionar estilos de células personalizados ao Editor de menu pop-up. Estilos de células 
personalizados estão disponíveis, junto com as seleções predefinidas na guia Aparência, quando o 
usuário seleciona a opção Imagem como o tipo das células, a qual define o uso de fundos gráficos 
nas células dos menus pop-up. 


Para adicionar um estilo de célula personalizado às opções de estilos de célula na guia Aparência 
do Editor de menu pop-up: 


1 


Aplicar qualquer combinação de traçado, preenchimento, textura e Efeitos ao vivo a um objeto 
e salvá-lo como um estilo usando o painel Estilos. Para mais informações, consultar “Criação e 
exclusão de um estilo” na página 250. 


Criação de botões e menus pop-up 303 


2 Selecionar o novo estilo no painel Estilos e, em seguida, selecionar Exportar estilos no menu de 
opções do painel Estilos. 


3 Navegar até a pasta Nav Menu no disco rígido, renomear o arquivo de estilo, caso desejado, e 
clicar em Salvar. 


Nota: A localização exata da pasta Nav Menu varia em função do sistema operacional. Para mais informações, 
consultar “Como trabalhar com arquivos de configuração” na página 427. 


Ao retornar à guia Aparência do Editor de menu pop-up e selecionar a opção de fundo de 
células Imagem, o novo estilo estará disponível junto com os estilos predefinidos das células dos 
menus pop-up para os estados Acima e Sobre. 


Configuração de propriedades avançadas de menus pop-up 


A guia Avançada, do Editor de menu pop-up, oferece configurações adicionais para o controle do 
tamanho, preenchimento e espaçamento das células, recuo do texto, tempo de espera para o 
desaparecimento do menu e da largura, cor, sombra e realce das bordas das células. 


Editor de menu pop-up 


Conteúdo | Aparência | Avançada | Posição 


Largura da célula: Automática 


Altura da célula: Automática v 


Preenchimento da célula: Recuo do testo: | 0 | 


3 
Espaçamento entre as células: | 0 Espera do menu: | 1000 ms 


Bordas pop-up: Mostrar bordas 


Largura da borda: Sombra: E 


Cor da borda: Realce: 


North America 
ELpope 


Middle East 


Cancelar < Voltar Prógimo> | | Concluído 


Para definir propriedades avançadas de células para o menu pop-up atual: 
1 Como menu pop-up desejado aberto no Editor de menu pop-up, clicar na guia Avançada. 


Para mais informações sobre como abrir um menu pop-up existente no Editor de menu pop- 
up, consultar “Edição de menus pop-up” na página 307. 
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2 No menu pop-up Automática/Fixa, selecionar um limite de largura ou altura: 


Automática força a altura da célula a se ajustar ao tamanho do texto definido na guia Aparência 
do Editor de menu pop-up e a largura da célula a se ajustar ao item de menu que contém o texto 
mais longo. 


Pixels permite digitar medidas específicas em pixels nas caixas de texto Largura da célula e 
Altura da célula. 


3 Na caixa de texto Preenchimento da célula, digitar um valor para determinar a distância entre o 
texto do menu pop-up e a borda da célula. 


4 Na caixa de texto Espaçamento entre as células, digitar um valor para definir a quantidade de 
espaço entre as células do menu. 


5 Nacaixa de texto Recuo do texto, digitar um valor para definir a quantidade de recuo para o texto 
do menu pop-up. 


6 Na caixa de texto Espera do menu, digitar um valor para definir a quantidade de tempo em 
segundos em que o menu permanece visível após a passagem do ponteiro sobre o mesmo. 


7 Definir as propriedades das bordas do menu pop-up: 


Mostrar bordas permite mostrar ou ocultar as bordas do menu pop-up. Se esta opção não 
estiver selecionada, as opções a seguir serão desativadas. 


Largura da borda ajusta a largura da borda do menu pop-up. 
Cor, sombra e realce da borda permite modificar a cor das bordas do menu pop-up. 


Nota: Muitas dessas opções serão desativadas se o tipo de célula Imagem estiver selecionado na guia 
Aparência. 


8 Executar um dos seguintes procedimentos para completar o menu pop-up ou continuar a 
construí-lo: 


e Clicar em Próximo para ir para a guia Posição ou selecionar outra guia para continuar a 
construção do menu pop-up. 


e Clicar em Concluído para fechar o Editor de menu pop-up. No espaço de trabalho, o ponto 
ativo ou fatia no qual o menu pop-up foi construído exibe uma linha azul de comportamento 
anexada a um contorno do nível superior do menu pop-up. 


Nota: Para exibir um menu pop-up, é necessário pressionar F12 para visualizá-lo em um navegador. A guia 
Visualização, no espaço de trabalho do Fireworks MX, não exibe menus pop-up. 
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Posicionamento de menus e submenus pop-up 


A guia Posição, do Editor de menu pop-up, permite especificar a posição de um menu pop-up. 
Também é possível posicionar um menu pop-up de nível superior arrastando seu contorno no 
espaço de trabalho quando a Camada da Web está visível. 


Editor de menu pop-up 


| Conteúdo | Aparência | Avançada | Posição 


Posição do menu: 


L g E rF 


Posição do submenu: 


[C Colocar na mesma posição 


Para definir a posição de um menu pop-up com o uso do Editor de menu pop-up: 
1 Como menu pop-up desejado aberto no Editor de menu pop-up, clicar na guia Posição. 


Para mais informações sobre como abrir um menu pop-up existente no Editor de menu pop- 
up, consultar “Edição de menus pop-up” na página 307. 


2 Executar um dos seguintes procedimentos para definir a posição do menu: 
e Clicar em um botão Posição para posicionar o menu pop-up em relação à fatia que o aciona. 


e Digitar as coordenadas X e Y. As coordenadas 0,0 alinham o canto superior esquerdo do menu 
pop-up ao canto superior esquerdo da fatia que o aciona. 


3 Seguir uma das seguintes opções: 
* Se houver submenus, posicioná-los como descrito no próximo procedimento. 
e Clicar em Voltar para modificar as propriedades em outras guias. 


e Clicar em Concluído para fechar o Editor de menu pop-up. 


Para definir a posição de um submenu pop-up com o uso do Editor de menu pop-up: 
1 Como menu pop-up desejado aberto no Editor de menu pop-up, clicar na guia Posição. 


Para mais informações sobre como abrir um menu pop-up existente no Editor de menu pop- 
up, consultar “Edição de menus pop-up” na página 307. 
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2 Executar um dos seguintes procedimentos para definir a posição do submenu: 


e Clicar em um botão Posição do submenu para posicionar o submenu em relação ao item de 
menu pop-up que o aciona. 


e Digitar as coordenadas X e Y. As coordenadas 0,0 alinham o canto superior esquerdo do 
submenu pop-up ao canto superior direito do menu ou item de menu que o aciona. 


3 Seguir uma das seguintes opções: 


* Para tornar a posição de cada submenu relativa ao item de menu principal que o aciona, 
selecionar a opção Colocar na mesma posição para a posição do submenu. 


* Para tornar a posição de cada submenu relativa ao menu pop-up inteiro, cancelar a seleção da 
opção Colocar na mesma posição. 


4 Clicar em Concluído para fechar o Editor de menu pop-up ou em Voltar para modificar as 
propriedades em outras guias. 

Para definir a posição de um menu pop-up arrastando-o: 

1 Se necessário, seguir um dos procedimentos a seguir para exibir a Camada da Web: 

e No painel Ferramentas, clicar no botão Mostrar fatias e pontos ativos. 

e No painel Camadas, clicar na coluna com um olho. 

2 Selecionar o objeto da Web que é o acionador do menu pop-up. 


3 Arrastar o contorno do menu pop-up para outro local no espaço de trabalho. 


Edição de menus pop-up 
No Editor de menu pop-up, é possível editar ou atualizar o conteúdo de um menu pop-up, 
reordenar os itens de menu ou alterar outras propriedades em quaisquer das quatro guias. 
Para editar um menu pop-up no Editor de menu pop-up: 
1 Se necessário, seguir um dos procedimentos a seguir para exibir a Camada da Web: 
e No painel Ferramentas, clicar no botão Mostrar fatias e pontos ativos. 
e No painel Camadas, clicar na coluna com um olho. 
2 Selecionar a fatia à qual está anexado o menu pop-up. 
3 Clicar duas vezes no contorno azul do menu pop-up no espaço de trabalho. 
O Editor de menu pop-up se abre, exibindo as entradas do menu pop-up. 


4 Efetuar as modificações desejadas em uma das quatro guias e clicar em Concluído. 


Para alterar uma entrada de um menu pop-up: 


1 Como menu pop-up desejado sendo exibido no Editor de menu pop-up, clicar na guia 
Conteúdo. 


2 Clicar duas vezes nas caixas de texto Texto, Link ou Destino e editar o texto do menu. 
3 Clicar fora da lista de entradas para aplicar a alteração. 


4 Clicar em Concluído. 
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Para mover uma entrada no menu pop-up: 


1 Como menu pop-up desejado sendo exibido no Editor de menu pop-up, clicar na guia 
Conteúdo. 


2 Arrastar o item de menu para um novo local na lista. 


3 Clicar em Concluído. 


Sobre exportação de menus pop-up 


O Fireworks gera todo o JavaScript necessário para exibir menus pop-up em navegadores da Web. 
Ao exportar um documento do Fireworks contendo menus pop-up para HTML, um arquivo 
JavaScript denominado mm menu.js é exportado para o mesmo local do arquivo HTML. 


Ao carregar os arquivos, será necessário carregar mm menu.js no mesmo local do diretório da 
página da Web que contém o menu pop-up. Se o usuário desejar enviar o arquivo a um local 
diferente, será necessário atualizar o hiperlink que faz referência a mm menu.js no código HTML 
do Fireworks, para que reflita o local personalizado. Se o documento contiver vários menus pop- 
up ou se houver vários documentos com menus pop-up, o Fireworks não criará arquivos 

mm menu.js adicionais; somente um único arquivo será usado para todos os menus em todos os 
documentos. 


Ao incluir submenus, o Fireworks gera um arquivo de imagem denominado arrows.gif. Essa 
imagem é a seta fina que aparece próximo da entrada de um menu, a qual indica aos usuários a 
existência de um submenu. Independentemente da quantidade de submenus em um documento, 
o Fireworks sempre usa o mesmo arquivo arrows.gif. 


Para mais informações sobre como exportar HTML e JavaScript, consultar “Exportação de 
HTML” na página 352. 
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CAPÍTULO 14 
Criação de animação 


Gráficos animados proporcionam um visual sofisticado e emocionante a um site da Web. No 
Macromedia Fireworks MX, é possível criar gráficos animados com faixas de propaganda, 
logotipos e desenhos animados. Por exemplo, é possível fazer o mascote da companhia dançar 
através de uma página enquanto o logotipo clareia e escurece. 


Uma maneira de se construir animações no Fireworks é através da criação de símbolos e da alteração 
de suas propriedades ao longo do tempo, para criar a ilusão de movimento. Um símbolo é como um 
ator cuja coreografia é criada pelo usuário. A ação de cada símbolo é armazenada em uma moldura. 
Quando todas as molduras juntas são reproduzidas em uma seqüência, obtém-se a animação. 


É possível aplicar configurações diferentes ao símbolo para alterar gradualmente o conteúdo das 
molduras sucessivas. É possível fazer com que um símbolo pareça se mover através da tela, clareie 
e escureça, fique maior ou menor, ou gire. 


Como é possível ter vários símbolos em um único arquivo, é possível criar uma animação 
complexa onde tipos diferentes de ação ocorrem todas de uma vez. 


O painel Otimizar permite definir configurações de otimização e exportação para controlar a 
forma de criação do arquivo. O Fireworks pode exportar animações como arquivos GIF animado 
ou Flash SWE Também é possível importar animações do Fireworks diretamente no Macromedia 
Flash para edição adicional. 


Como construir uma animação 


No Fireworks, é possível criar animações atribuindo-se propriedades a objetos denominados 
símbolos de animação. A animação de um símbolo é dividida em molduras que contêm as imagens e 
objetos que compõem cada etapa da animação. É possível ter mais de um símbolo em uma 
animação, e cada símbolo pode ter uma ação diferente. Símbolos diferentes podem conter números 
diferentes de molduras. A animação termina quando toda a ação de todos os símbolos se conclui. 


Para construir uma animação com o uso de símbolos de animação no Fireworks: 


1 Criar um símbolo de animação através da criação do símbolo do zero ou da conversão de um 
objeto existente em um símbolo. Para mais informações, consultar “Criação de um símbolo de 
animação” na página 310. 


2 Usaro Inspetor de propriedades ou a caixa de diálogo Animar para inserir configurações para o 
símbolo de animação. É possível definir o grau e a direção do movimento, o dimensionamento, 
a opacidade (clarear ou escurecer), bem como o ângulo e a direção de rotação. Para mais 
informações, consultar “Edição de um símbolo de animação” na página 311. 


Nota: O grau e a direção das opções de movimento encontram-se somente na caixa de diálogo Animar. 
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3 Usar os controles Retardo de moldura no painel Molduras para definir a velocidade do 
movimento da animação. Para mais informações, consultar “Configuração do retardo de uma 
moldura” na página 314. 


4 Otimizar o documento como um GIF animado. Para mais informações, consultar “Otimização 
de uma animação” na página 321. 


5 Exportar o documento como um GIF ou SWF animado, ou salvá-lo como um PNG Fireworks 
e importá-lo no Macromedia Flash para edição posterior. Para mais informações, consultar 
“Formatos de exportação de uma animação” na página 322. 


Como trabalhar com um símbolo de animação 


Os símbolos de animação executam ações no arquivo Fireworks como os atores em um filme. Por 
exemplo, em uma animação com três gansos voando no céu, cada ganso é um membro do elenco. 


Um símbolo de animação pode ser qualquer objeto criado ou importado, e é possível ter vários 
símbolos em um arquivo. Cada símbolo tem suas próprias propriedades e apresenta uma 
animação independentemente. Desta forma, é possível criar símbolos que se movem através da 
tela enquanto outros se apagam ou encolhem. 


Não é necessário usar símbolos para cada aspecto da animação. Porém, o uso de símbolos e 
ocorrências para gráficos que aparecem em múltiplas molduras manterá o tamanho do arquivo de 
animação menor, além das vantagens discutidas neste capítulo. 


É possível alterar as propriedades do símbolo de animação a qualquer momento com o uso da 
caixa de diálogo Animar ou do Inspetor de propriedades. Também é possível editar a imagem do 
símbolo no Editor de símbolo. O Editor de símbolo permite editar o símbolo sem afetar o resto 
do documento. Também é possível alterar o movimento do símbolo alterando seu percurso de 
movimento. 


Como os símbolos de animação são colocados automaticamente na biblioteca, é possível reutilizá- 
los para criar outras animações. 


Criação de um símbolo de animação 
Depois de criar um símbolo de animação, é possível definir as propriedades que determinam o número 
de molduras na animação e o tipo de ação, como dimensionamento e rotação. Por padrão, o novo 
símbolo de animação tem cinco molduras, cada uma com um tempo de retardo de 0,07 segundo. 
Para criar um símbolo de animação: 
1 Selecionar Editar > Inserir > Novo símbolo. 
2 Na caixa de diálogo Propriedades do símbolo, digitar um nome para o novo símbolo. 
3 Selecionar Animação e clicar em OK. 
4 No Editor de símbolo, usar as ferramentas de desenho ou texto para criar um novo objeto. 
É possível desenhar objetos vetoriais ou de bitmap. 
5 Fechar a janela do Editor de símbolo. 
O Fireworks coloca o símbolo na biblioteca e uma cópia no centro do documento. 


É possível adicionar novas molduras ao símbolo com o uso do controle deslizante Molduras no 
Inspetor de propriedades. Selecionar Janela > Propriedades para abrir o Inspetor de propriedades, 
caso não esteja já aberto. 
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Para converter um objeto em um símbolo de animação: 
1 Selecionar o objeto. 
2 Selecionar Modificar > Animação > Animar seleção. 


3 Inserir as configurações desejadas na caixa de diálogo. Para mais informações sobre essas 
configurações e como personalizá-las, consultar “Edição de um símbolo de animação” na 
página 311. 


Os controles de animação aparecem na caixa de limites do objeto e uma cópia é adicionada 
à biblioteca. 


Edição de um símbolo de animação 


É possível manipular as propriedades de símbolos de animação para dar vida a um site da Web. É 
possível alterar uma série de propriedades em um símbolo, da velocidade de animação à opacidade 
e rotação. Ao manipular essas características, é possível fazer com que um símbolo pareça rodar, 
aumentar a velocidade, escurecer e clarear, ou qualquer combinação dos efeitos acima. 


Uma propriedade chave para qualquer símbolo de animação é o seu número de molduras. Essa 
propriedade define quantos passos são necessários para que o símbolo complete sua animação. Ao 
definir o número de molduras para um símbolo, o Fireworks adiciona automaticamente o 
número necessário de molduras ao documento para completar a ação. Se o símbolo exigir mais 
molduras do que as existentes atualmente na animação, o Fireworks adicionará mais molduras. 


Alteração de uma propriedade de animação 


É possível alterar as propriedades da animação com o uso da caixa de diálogo Animar ou do Inspetor 


de propriedades. 


Animação Molduras: [1 |M pacidade: [100 |M} Para [100 |5 | Normal VEO) 
E | Escala: | 100 | Rotação: [0 {v e Efeitos: +, 


w:l2s7 | x. [285 | 
Hluo | Y: [134 | a 


Propriedades de símbolo de animação no Inspetor de propriedades 


É possível editar quaisquer das seguintes propriedades de um símbolo de animação: 


Molduras é o número de molduras que se deseja incluir na animação. Embora o controle 
deslizante permita definir apenas um máximo de 250 molduras, é possível inserir qualquer 
número desejado na caixa de texto Molduras. O padrão é 5. 


Movimento é a distância desejada, em pixels, para a movimentação de cada objeto. Esta opção está 
disponível somente na caixa de diálogo Animar. A faixa de valores vai de O a 250 pixels e o padrão 
é72. O movimento é linear e não há quadros-chave (como no Macromedia Flash e Director). 


Direção é a direção, em graus, na qual se deseja que o objeto se mova. A faixa de valores vai de O a 
360 graus. Esta opção está disponível somente na caixa de diálogo Animar. 


Também é possível alterar os valores de Movimento e Direção arrastando-se as alças do objeto de 
animação (consultar “Edição de caminhos de movimento de símbolo” na página 313). 
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Dimensionamento é a porcentagem de alteração do tamanho do início ao fim. A faixa de valores 
vai de 0 a 250 e o padrão é 100%. Para dimensionar um objeto de O a 100%, o objeto original 
deve ser muito pequeno; recomendam-se os objetos vetoriais. 


Opacidade é o grau de escurecimento ou clareamento do início ao fim. A faixa de valores vai de O 
a 100 e o padrão é 100%. A criação de um clareamento/escurecimento exige duas ocorrências do 
mesmo símbolo, uma para executar o clareamento e outra para executar o escurecimento. 


Rotação é a quantidade, em graus, que o símbolo gira do início ao fim. A faixa de valores vai de O 
a 360 graus. É possível inserir valores maiores para mais de uma rotação. O padrão é O grau. 


SH e SAH indica a direção na qual o objeto gira. SH indica rotação em sentido horário e SAH 
indica rotação em sentido anti-horário. 

Para alterar as propriedades de um símbolo de animação: 

1 Selecionar um símbolo de animação. 


2 Selecionar Modificar > Animação > Configurações para abrir a caixa de diálogo Animar ou 
Janela > Propriedades para abrir o Inspetor de propriedades caso este não esteja já aberto. 


Animar 


Molduras: 5 


Mover: 
Direção: 
Dimensionar para: 


Opacidade: 
Gia: (0 |» SH O SAH 


3 Alterar as propriedades desejadas. 


Remoção de uma animação 

É possível remover animações através da exclusão do símbolo de animação da biblioteca ou da 
remoção da animação do símbolo. 

Para remover um símbolo da biblioteca: 

1 No painel Biblioteca, selecionar o símbolo de animação que se deseja remover. 


2 Arrastar o símbolo para o ícone de lixeira no canto inferior direito. 


Para remover a animação de um símbolo de animação selecionado: 
Selecionar Modificar > Animação > Remover animação. 


O símbolo se transforma em um símbolo gráfico e não é mais animado. Posteriormente, se o 
símbolo for convertido outra vez em um símbolo de animação, as configurações anteriores da 
animação retornarão. 
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Edição do gráfico de um símbolo 


É possível alterar o gráfico em que se baseia o símbolo, bem como suas propriedades. É possível editar 
gráficos de símbolos no Editor de símbolo. O Editor de símbolo permite usar as ferramentas de 
desenho, texto ou cor para editar o gráfico. Enquanto o usuário trabalha no Editor de símbolo, 
somente o símbolo selecionado é afetado. 


Como o símbolo é um item da biblioteca, se a aparência de uma de suas ocorrências for alterada, 
todas as demais ocorrências também serão alteradas. 

Para alterar os atributos gráficos de um símbolo selecionado: 

1 Executar um dos seguintes procedimentos para abrir o Editor de símbolo: 

e Clicar duas vezes no objeto de símbolo. 

e Selecionar Modificar > Símbolo > Editar símbolo. 

e Na caixa de diálogo Animar, clicar no botão Editar. 


2 Modificar o símbolo de animação e alterar qualquer texto, traços, preenchimentos e efeitos, 
como for apropriado. 


3 Fechar o Editor de símbolo. 


Edição de caminhos de movimento de símbolo 


Ao selecionar um símbolo de animação, ele apresenta uma caixa de limites exclusiva e um 
caminho de movimento anexado que indica a direção na qual o símbolo se move. 


O ponto verde no caminho do movimento indica o ponto de início, enquanto o ponto vermelho 
mostra o ponto final. Os pontos azuis no caminho representam as molduras. Por exemplo, um 
símbolo com cinco molduras terá um ponto verde, três pontos azuis e um ponto vermelho em seu 
caminho. A posição do objeto no caminho indica a moldura atual. Assim, se o objeto aparecer no 
terceiro ponto, a Moldura 3 será a moldura atual. 


É possível alterar a direção do movimento alterando o ângulo do do traçado. 


Para alterar o movimento ou direção: 


Arrastar uma das alças de início ou final de animação do símbolo para uma nova localização. O 
ponto verde indica o ponto de início; o ponto vermelho indica o ponto final. 


Manter pressionada a tecla Shift e arrastar para restringir a direção do movimento em incrementos 


de 45 graus. 
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Como trabalhar com uma moldura 


As animações são construídas com a criação de várias molduras. É possível ver o conteúdo de cada 
moldura usando-se o painel Molduras. O painel Molduras é o local de criação e organização de 
molduras. É possível nomear as molduras, reorganizá-las, definir manualmente a duração da 
animação e mover objetos de uma moldura para outra. 


Coluna onion skinning 


Moldura! ——- Nome da moldura 
Moldura 2 


Moldura 3 Coluna Retardo de moldura 
Moldura 4 
Moldura 5 


F, 9 Parasempre 


Opções de i Exclui moldura 
técnica onion skin Moldura nova/duplicada 
Distribui para molduras 


Cada moldura também tem um número de propriedades associadas. Ao definir o retardo de uma 
moldura ou escondê-la, é possível fazer com que sua animação fique com a aparência desejada 
durante o processo de construção e edição. 


Configuração do retardo de uma moldura 


O retardo de moldura determina a duração de exibição da moldura atual. O retardo é especificado 
em centésimos de segundo. Por exemplo, uma configuração de 50 exibe a moldura por meio 
segundo, enquanto uma configuração de 300 a exibe por três segundos. 

Para definir o valor de retardo de uma moldura: 


1 Selecionar uma ou mais molduras: 


* Para selecionar uma faixa contígua de molduras, pressionar a tecla Shift e clicar nos nomes da 
primeira e da última molduras. 


* Para selecionar uma faixa de molduras não contíguas, manter pressionada a tecla Control 
(Windows) ou Comando (Macintosh) e clicar no nome de cada moldura. 


2 Seguir uma das seguintes opções: 
* No menu de opções do painel Molduras, selecionar Propriedades. 
e Clicar duas vezes na coluna de retardo da moldura. 
Aparece a janela pop-up Propriedades da moldura. 
3 Digitar um valor para o retardo da moldura. 


4 Pressionar Enter ou clicar fora do painel para fechar a janela pop-up. 
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Como mostrar e ocultar molduras para reprodução 
É possível mostrar ou ocultar molduras para a reprodução. Se uma moldura estiver oculta, não 
será exibida durante a reprodução e não será exportada. 
Para mostrar ou ocultar uma moldura: 
1 Seguir uma das seguintes opções: 
e No menu de opções do painel Molduras, selecionar Propriedades. 
e Clicar duas vezes na coluna de retardo da moldura. 
Aparece a janela pop-up Propriedades da moldura. 
2 Cancelar a seleção de Incluir ao exportar. 


Exibe-se um X vermelho no lugar do tempo de retardo da moldura. 


|2 Moldura2 
|3 Moldura3 
|4 Moldura é 
|5 Moldura5 


g, Ç Parasempre 


3 Pressionar Enter ou clicar fora da janela pop-up Propriedades da moldura para fechá-la. 


Nomeação de molduras de animação 


À medida que o usuário configura uma animação, o Fireworks cria o número de molduras 
apropriado e as exibe no painel Molduras. As molduras são nomeadas com o padrão Moldura 1, 
Moldura 2 e assim por diante. Ao mover uma moldura no painel, o Fireworks renomeia todas elas 
para refletir a nova ordem. 


É uma boa idéia nomear as molduras para uma referência fácil e para poder acompanhá-las. Desta 
forma, o usuário sempre saberá qual moldura contém uma parte da animação. Ao renomear uma 
moldura e depois movê-la, seu nome não se altera. 


1 Moldura inicial 


2 Objeto aparece 


E] 5 Moldura final 


A G Parasempre 


Para alterar o nome de uma moldura: 
1 No painel Molduras, clicar duas vezes no nome da moldura. 


2 Na caixa de texto pop-up, digitar um novo nome e pressionar Enter. 
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Como adicionar, mover, copiar e excluir molduras 


É possível adicionar, copiar, excluir e alterar a ordem de molduras no painel Molduras. 


Para adicionar uma nova moldura: 


Na base do painel Molduras, clicar no botão Novo/Duplicar moldura. 


Para adicionar molduras a um local específico na segiência: 

1 No menu de opções do painel Molduras, selecionar Adicionar molduras. 

2 Digitar o número de molduras a adicionar. 

3 Selecionar onde inserir as molduras: antes da moldura atual, depois dela, no início ou no final. 
Em seguida, clicar em OK. 

Para fazer uma cópia de uma moldura: 


Arrastar uma moldura existente até o botão Moldura nova/duplicada na base do painel Molduras. 


Para copiar uma moldura selecionada e colocá-la em uma sequência: 
1 No menu de opções do painel Molduras, selecionar Duplicar moldura. 


2 Digitar o número de duplicatas a criar para a moldura selecionada e escolher onde as molduras 
duplicadas serão inseridas e, em seguida, clicar em OK. 


A duplicação de uma moldura é útil quando se deseja que os objetos reapareçam em outra parte da 
animação. 
Para reordenar molduras: 


Arrastar as molduras, uma a uma, para uma nova localização na lista. 


Para excluir a moldura selecionada, executar um dos seguintes procedimentos: 
* No painel Molduras, clicar no botão Excluir moldura. 
e Arrastar a moldura até o botão Excluir moldura. 


e No menu de opções do painel Molduras, selecionar Excluir moldura. 


Como mover objetos selecionados no painel Molduras 


É possível usar o painel Molduras para mover objetos para uma moldura diferente. Os objetos que 
aparecem somente em uma única moldura parecem desaparecer à medida em que se executa a 
animação. É possível mover objetos para fazê-los aparecer ou desaparecer em pontos diferentes do 
filme. 
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Para mover um objeto selecionado para uma moldura diferente: 


No painel Molduras, arrastar o indicador de seleção (o pequeno quadrado azul), à direita do 
tempo de retardo da moldura, para a nova moldura. 


& v Molduras e Histórico 


EJ i Molduras 20 


2 Moldura? 2 Moldura? 
3 Moldura 3 3 Moldura 3 
4 Moldura 5 4 Moldura 5 
5 Moldura 6 5 Moldura 6 


A G Para sempre F, G Para sempre 


Compartilhamento de camadas através de molduras 


As camadas dividem um documento do Fireworks em planos individuais, como camadas separadas 
de papel vegetal. Com animações, é possível usar camadas para organizar objetos que façam parte do 
cenário ou do pano de fundo da animação. Isto oferece a comodidade de poder fixar objetos em 
uma camada para que não afetem o resto de uma animação. Para mais informações, consultar 
“Como trabalhar com uma camada” na página 221. 


Se o usuário desejar que os objetos apareçam em toda a animação, será possível colocá-las em uma 
camada e, em seguida, usar o painel Camadas para compartilhá-la entre as molduras. Quando 
uma camada for compartilhada entre as molduras, todos os objetos naquela camada serão visíveis 
em cada moldura. 


E possível editar objetos em camadas compartilhadas em qualquer moldura; estas edições 
refletem-se em todas as outras molduras. 


B 100 4 | Normal 


Ds E3 Camada da Web 
E & É E quadrado vermelho 


= Sia Símbolo de animação 
- 


x Fetângulo 


Moldura 1 


Neste exemplo, a camada quadrada vermelha é compartilhada pelas molduras. 


Para compartilhar uma camada entre molduras: 
1 Clicar duas vezes na camada. 
2 Selecionar Compartilhar entre molduras. 


Nota: O conteúdo de uma camada compartilhada inteira aparece em cada moldura. 


Para desativar o compartilhamento de uma determinada camada entre molduras: 
1 Clicar duas vezes na camada compartilhada. 


2 Cancelar a seleção de Compartilhar entre molduras. 
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3 Selecionar uma das seguintes opções de cópia de objetos em molduras: 
e Deixar o conteúdo da camada compartilhada somente na moldura atual. 


e Copiar o conteúdo da camada compartilhada para todas as molduras. 


Exibição de objetos dentro de uma moldura específica 
É possível exibir com facilidade objetos dentro de uma moldura específica com o uso, no painel 


Camadas, do menu pop-up Moldura. 


Para exibir objetos dentro de uma moldura específica: 


Na base do painel Camadas, selecionar a moldura desejada no menu pop-up. 


Hfi M | Normal 
Ds E Camada da Web 

Ds Ê =. quadrado vermelho 
= 


Moldura 2 a 


Moldura 3 
Moldura 5 
Moldura 6 


Símbolo de animação 


Retângulo 


SoM 


Todos os objetos dentro da moldura selecionada são listados no painel Camadas e são exibidos na tela. 


Utilização de onion skinning 


O recurso "onion skinning" permite exibir o conteúdo de molduras anteriores e posteriores à 
moldura selecionada atualmente. É possível animar objetoscom facilidade sem a necessidade de se 
mover para frente e para trás através delas. O termo onion skinning provém de uma tradicional 
técnica de animação que utiliza papel vegetal fino para exibir segiiências animadas. 


Ao ativar o "onion skinning", os objetos em molduras antes ou depois da atual são atenuados para 
que possam se distinguir dos objetos na moldura atual. 


Por padrão, Edição de múltiplas molduras é ativado, o que significa que é possível selecionar e 
editar objetos atenuados em outras molduras sem sair da moldura atual. É possível usar a 
ferramenta Selecionar atrás para selecionar objetos em molduras de maneira sequencial. 
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Para ajustar o número de molduras visíveis antes e depois da moldura atual: 


1 


No painel Molduras, clicar no botão Opções de transparência. 


EJ i Moldura! 


2 Moldura? 
3 Moldura 3 
4 Moldura 5 
5 Moldura 


Mostrar próxima moldura 
Antes e depois 

Mostrar todas as molduras 
Personalizar... 


v Edição de múltiplas molduras 


Selecionar uma opção de exibição: 

Sem onion skin desativa o onion skinning e exibe somente o conteúdo da moldura atual. 
Mostrar próxima moldura exibe o conteúdo da moldura atual e da próxima moldura. 
Antes e depois exibe o conteúdo da moldura atual e das adjacentes. 

Mostrar todas as molduras exibe o conteúdo de todas as molduras. 


Personalizar define um número personalizado de molduras e controla a opacidade do 
onion skinning. 


Edição de múltiplas molduras permite selecionar e editar todos os objetos visíveis. Cancelar a 
seleção dessa opção para selecionar e editar objetos somente na moldura atual. 


Interpolação 


Interpolação é um termo tradicional em animação que descreve o processo no qual um animador- 
chefe desenha somente os quadros-chave (molduras contendo as alterações principais), enquanto 
os assistentes desenham as molduras intermediárias. 


No Fireworks, a interpolação mistura duas ou mais ocorrências do mesmo símbolo, criando 
ocorrências intermediárias com atributos interpolados. A interpolação é um processo manual útil 
para movimentos mais sofisticados de um objeto através da tela e para objetos cujos Efeitos ao 
vivo mudam em cada moldura da animação. 


Por exemplo, é possível interpolar um objeto de modo que ele pareça mover-se ao longo de um 
caminho linear. 


Para interpolar ocorrências: 


1 


Selecionar duas ou mais ocorrências do mesmo símbolo gráfico na tela. Não selecionar 
ocorrências de símbolos diferentes. 


Selecionar Modificar > Símbolo > Interpolar ocorrências. 


Na caixa de diálogo Interpolar ocorrências, digitar o número de etapas intermediárias a serem 
inseridas entre o par original. 
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4 Para distribuir os objetos interpolados em molduras separadas, selecionar Distribuir para 
molduras e clicar em OK. 


Se o usuário optar por não distribuir os objetos em molduras separadas, isto poderá ser feito 
posteriormente selecionando todas as ocorrências e clicando, no painel Molduras, no botão 
Distribuir para molduras. 


Nota: Na maioria dos casos, o uso de símbolos de animação é preferível à interpolação. Para mais informações, 
consultar “Como trabalhar com um símbolo de animação” na página 310. 


Como visualizar uma animação 
É possível visualizar uma animação enquanto se trabalha nela para ver sua evolução. Também é 
possível visualizar uma animação depois de uma otimização, para ver como será sua aparência em 
um navegador da Web. 
Para visualizar uma animação no espaço de trabalho: 


Usar os controles de moldura que aparecem na base da janela do documento. 


Controles de moldura 


Ter em mente o seguinte ao visualizar animações: 


* Para definir quanto tempo cada moldura aparecerá na janela do documento, informar as 
configurações de retardo da moldura no painel Molduras. 


* As molduras excluídas da exportação não aparecem na visualização. 

e A visualização da animação na exibição Original mostra o gráfico de origem com resolução 
total, não a visualização otimizada usada para o arquivo de exportação. 

Para visualizar uma animação na janela Visualização: 

1 Clicar na guia Visualização no topo da janela do documento. 

2 Usar os controles de moldura. 


Nota: Não é recomendável visualizar animações em 2 para cima e 4 para cima. 


Para visualizar uma animação em um navegador da Web: 
Selecionar Arquivo > Visualizar no navegador e selecionar um navegador no submenu. 


Nota: É necessário selecionar GIF animado como o formato de arquivo de exportação no painel Otimizar, ou não 
será visível nenhum movimento ao visualizar o documento no navegador. Isto será necessário mesmo se o usuário 
planejar importar uma animação no Flash como um arquivo SWF ou PNG Fireworks. 


Exportação de uma animação 


Depois de configurar os símbolos e molduras que compõem uma animação, é possível exportar o 
arquivo como uma animação. Antes de exportar os arquivos, primeiro é necessário definir algumas 
configurações para fazer com que a animação seja carregada e reproduzida mais facilmente. É 
possível definir configurações de reprodução, como ciclo e transparência, e, em seguida, usar a 
otimização para tornar o arquivo exportado menor e mais fácil de se transferir. 
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Nota: Se o usuário planejar a importação de uma animação no Macromedia Flash para edição posterior, não será 
necessário exportá-la. O Flash MX pode importar diretamente arquivos de origem PNG Fireworks. Consultar 
“Como trabalhar com o Macromedia Flash MX” na página 377. 


Definição da repetição de uma animação 
A configuração de Ciclo no painel Molduras determina o número de repetições da animação. Esse 
recurso executa vários ciclos com as molduras, possibilitando a minimização do número de 
molduras necessárias para construir a animação. 
Para definir a repetição da animação selecionada: 
1 Selecionar Janela > Molduras para exibir o painel Molduras. 


Na base do painel, clicar no botão Ciclo de animação GIF 


Selecionar o número de repetições da animação depois da primeira execução. 


Se, por exemplo, o usuário selecionar 4, a animação será executada cinco vezes ao todo. Para 
sempre repete a animação continuamente. 


Definição de uma transparência 


Como parte do processo de otimização, é possível definir uma ou mais cores dentro de um GIF 
animado para exibição em um navegador da Web como transparente. Isto é útil quando se deseja 
mostrar uma cor ou imagem de fundo da página da Web na animação. 

Para exibir uma cor como transparente em um navegador da Web: 

1 Selecionar Janela > Otimizar, se o painel Otimizar não estiver visível. 


2 No menu pop-up Transparência do painel Otimizar, selecionar Transparência do índice ou 
Transparência alfa. Para uma descrição dessas opções, consultar “Como tornar áreas 
transparentes” na página 341. 


3 Usar as ferramentas de transparência no painel Otimizar para selecionar cores para a 
transparência. 


Otimização de uma animação 


A otimização comprime ao máximo o arquivo para proporcionar transferência e exportação 
rápidas, tornando o tempo de visualização muito menor no site da Web. 
Para otimizar uma animação: 


1 Seo usuário planejar a exportação de uma animação como um GIF animado, deverá selecionar 
GIF animado como o formato de exportação de arquivo no painel Otimizar. 


Selecionar Janela > Otimizar, se o painel não estiver visível. 


2 Definir as opções Paleta, Pontilhado ou Transparência. Para mais informações sobre opções de 
otimização, consultar “Otimização de GIF, PNG, TIFF, BMP e PICT” na página 334. 


3 No painel Molduras, definir o retardo das molduras. Para mais informações, consultar 
“Configuração do retardo de uma moldura” na página 314. 
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Formatos de exportação de uma animação 
Depois de criar e otimizar uma animação, ela está pronta para ser exportada. 


Os GIFs animados oferecem os melhores resultados para imagens gráficas de clipart e do tipo 
desenho animado. Para mais informações sobre como exportar GIFs animados, consultar 
“Exportação de uma animação” na página 350. 


É possível exportar a animação como um arquivo Flash SWF e, em seguida, importá-la para o 
Macromedia Flash. Ou é possível ignorar a etapa de exportação e importar o arquivo de origem 
PNG Fireworks diretamente no Flash MX. Essa opção proporciona o maior controle sobre a 
forma de importação de uma animação. É possível importar todas as camadas e molduras de uma 
animação, se desejado, e editá-las posteriormente no Flash. Para mais informações, consultar 
“Como trabalhar com o Macromedia Flash MX” na página 377. 


Também é possível exportar molduras ou camadas de animações como arquivos múltiplos. Isto 
poderá ser útil quando existirem muitos símbolos em camadas diferentes para o mesmo objeto. 
Por exemplo, será possível exportar um anúncio em faixa como vários arquivos se cada letra do 
nome da empresa for animada em um gráfico. Cada letra é separada das outras. Para mais 
informações sobre como exportar camadas ou molduras para múltiplos arquivos, consultar 
“Exportação de uma moldura ou camada” na página 351. 


Como trabalhar com uma animação existente 


É possível usar um arquivo de GIF animado existente como parte de uma animação do Fireworks. 
Há duas maneiras de o usuário usar o arquivo: importar o GIF para um arquivo Fireworks 
existente ou abri-lo como um novo arquivo. 


Ao importar um GIF animado, o Fireworks o converte em um símbolo de animação e o coloca na 
moldura selecionada atualmente. Se a animação tiver mais molduras do que o filme atual, o 
usuário poderá selecionar a adição automática de mais molduras. 


Os GIFs importados perdem suas configurações originais de retardo de moldura e assumem o 
retardo de moldura do documento atual. Como o arquivo importado é um símbolo de animação, 
será possível aplicar movimento adicional a ele. Por exemplo, o usuário pode importar uma 
animação de um homem andando no lugar e depois aplicar propriedades de direção e movimento 
para fazê-lo andar através da tela. 


Ao abrir um GIF animado no Fireworks, cria-se um novo arquivo e coloca-se cada moldura do 
GIF em uma moldura separada. Embora o GIF não seja um símbolo de animação, ele mantém as 
configurações de retardo de moldura do arquivo original. 


Depois que o arquivo for importado, será necessário definir seu formato de arquivo como GIF 
animado para exportar o movimento a partir do Fireworks. 


Para importar um GIF animado: 

1 Selecionar Arquivo > Importar. 

2 Localizar o arquivo e clicar em Abrir. 

3 Clicar em Sim para adicionar mais molduras à animação. 


Clicando-se em Cancelar, somente a primeira moldura do GIF animado será exibida. Embora 
todo o documento seja importado, será necessário adicionar mais molduras para visualizá-lo. 


Para abrir um GIF animado: 


Selecionar Arquivo > Abrir e localizar o arquivo GIF. 
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Utilização de múltiplos arquivos como uma animação 
O Fireworks pode criar uma animação com base em um grupo de arquivos de imagem. Por 
exemplo, é possível criar um anúncio em faixa com base em diversos gráficos existentes, abrindo 
cada gráfico e colocando-o em uma moldura separada no mesmo documento. 
Para abrir múltiplos arquivos como uma animação: 
1 Selecionar Arquivo > Abrir. 
2 Manter a tecla Shift pressionada e clicar para selecionar múltiplos arquivos. 
3 Selecionar Abrir como animação e clicar em OK. 


O Fireworks abre os arquivos em um novo documento único, colocando cada um em uma 
moldura separada, na ordem em que foram selecionados. 
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CAPÍTULO 15 
Otimização e exportação 


A meta principal em um projeto gráfico para a Web é a criação de imagens atraentes e que se 
descarreguem com rapidez. Para isso, é necessário selecionar um formato de arquivo com a melhor 
compressão para a imagem, mantendo ao mesmo tempo a melhor qualidade possível. Este 
procedimento de equilíbrio é denominado otimização, através do qual encontram-se a mistura 
correta de cor, compressão e qualidade. 


A exportação de gráficos do Macromedia Fireworks MX é um processo com duas etapas: 


* Primeiro, prepara-se um documento ou gráfico fatiado individual para exportar, selecionando- 
se as configurações de otimização e comparando-se as visualizações para determinar um 
equilíbrio aceitável entre qualidade e tamanho de arquivo. 


* Em seguida, exporta-se o documento ou gráfico fatiado individual com o uso das configurações 
de exportação adequadas para seu destino, na Web ou em outro local. 


Se a otimização e exportação de gráficos para a Web for uma novidade, o usuário poderá usar o 
Assistente de exportação. O assistente orienta através do processo de exportação e sugere 
configurações. Ele também exibe Visualizar exportação, onde é possível otimizar um documento 
como parte do processo de exportação. 


Se houver familiaridade com as tarefas de otimização e exportação de gráficos, poderão ser usadas 
outras ferramentas disponíveis no Fireworks para executar essas tarefas. Para otimizar, é possível usar 
o painel Otimizar e as guias de visualização na janela do documento. Elas oferecem maior controle 
sobre o processo de otimização. Para exportar, é possível usar a caixa de diálogo Exportar ou o botão 
Exportação rápida. 


O botão Exportação rápida torna mais fácil a exportação de gráficos para uso em outros 
aplicativos através da configuração automática das opções apropriadas na caixa de diálogo 
Exportar. Se o Fireworks for usado com outros aplicativos, o botão Exportação rápida poderá 
simplificar o fluxo de trabalho de criação. 


Sobre otimização 
A otimização de gráficos no Fireworks envolve a execução do seguinte: 


* Escolha do melhor formato de arquivo. Cada formato de arquivo tem um método diferente de 
compressão das informações de cores. A escolha do formato apropriado para determinados 
tipos de gráficos pode reduzir sensivelmente o tamanho do arquivo. 


e Configuração de opções específicas do formato. Cada formato de arquivo gráfico tem um 
conjunto exclusivo de opções. É possível usar opções, como profundidade de cor, para reduzir o 
tamanho do arquivo. Alguns formatos de arquivo gráfico, como GIF e JPEG, também têm 
opções para o controle da compressão da imagem. 
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e Ajuste das cores no gráfico (somente para formatos de arquivo de 8 bits). É possível limitar as 
cores limitando a imagem a um conjunto de cores específico, denominado paleta de cores. 
Com isto, é possível eliminar cores não usadas na paleta de cores. Menos cores na paleta 
significam menos cores na imagem, o que resulta em um tamanho de arquivo menor para os 
tipos de arquivo de imagem com paletas. 


É recomendável experimentar todos os controles de otimização para encontrar o melhor equilíbrio 
entre qualidade e tamanho. 


Como usar o Assistente de exportação 


Se a otimização e exportação de gráficos da Web for uma novidade, o usuário poderá usar o 
Assistente de exportação. Com o uso do Assistente de exportação, é possível exportar gráficos 
facilmente, sem a necessidade de se compreender os detalhes de otimização e exportação. 


O Assistente de exportação orienta o usuário passo a passo através dos processos de otimização e 
exportação. Respondendo às perguntas sobre o destino do arquivo e uso pretendido, o Assistente 
de exportação sugere o tipo de arquivo e as configurações de otimização. 


Se for preferível otimizar o tamanho do arquivo alvo ao máximo, o Assistente de exportação 
otimizará o arquivo exportado para que se ajuste ao limite de tamanho definido. 


Assistente de exportação 


O Assistente de exportação o ajuda a: 
Selecionar um formato de exportação. 
Encontrar formas de minimizar o tamanho e maximizar a qualidade da imagem 
depois de selecionar um formato de exportação. 


Reduzir arquivo para um tamanho de destino solicitado. 


O que quer fazer agora? 


© Selecionar um formato de exportação. 


[C] Tamanho do arquivo de exportação de destino: 


I | k 


Continuar Cancelar 


Assistente de exportação 


Depois de estar mais familiarizado com a otimização e exportação, o usuário poderá desejar usar o 
painel Otimizar e a guia Visualização na janela do documento para otimizar os gráficos. Eles são 
mais convenientes do que o Assistente de exportação e oferecem maior controle sobre a 
otimização para os usuários habituados ao processo de otimização. Depois de otimizar os gráficos 
desta maneira, será necessário executar uma etapa adicional para exportar o gráfico. Para mais 
informações, consultar “Otimização no espaço de trabalho” na página 329 e “Exportação do 
Fireworks” na página 347. 


Para exportar um documento com o uso do Assistente de exportação: 
1 Selecionar Arquivo > Assistente de exportação. 


2 Responder às perguntas que aparecem e clicar em Continuar em cada painel. 
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Dica: Selecionar Tamanho do arquivo de exportação de destino no primeiro painel para otimizar o tamanho do 
arquivo ao máximo. 


O Fireworks faz recomendações relativas aos formatos de arquivo. 
3 Clicar em Sair. 
A janela Visualizar exportação se abre, com recomendações de opções de exportação. Para mais 
informações, consultar a próxima seção. 
Como usar Visualizar exportação 


A janela Visualizar exportação exibe as opções de otimização e exportação recomendáveis para o 
documento atual. 

Nota: A janela Visualizar exportação era usada em versões anteriores do Fireworks para otimizar e exportar 
gráficos simultaneamente. Ainda é possível abrir a janela Visualizar exportação através do Assistente de exportação 
ou selecionando Arquivo > Visualizar exportação. 


A área de visualização da janela Visualizar exportação exibe o documento ou gráfico exatamente 
como será exportado e estima o tamanho do arquivo e o tempo de descarregamento com as 
configurações de exportação atuais. 


Tamanho do arquivo e tempo de download estimados 


W Visualizar exportação 


Opções | Arquivo | Animação ualização[] | Configurações salvas: 


secs [E as e E E Configurações de exportação salvas na 
exibição ativa 


Qualidade: |80 | 4 


Suavização: [Sem suavização v 


a Visualização das configurações de exportação 
rogressiva 5 1 
au peidar polias n du escolhidas 


Removdr cores não usadas 


[x Hale val 
Exportar. OK Cancelar 


Conjunto de opções salvo para a exportação selecionada 


E possível dividir as exibições para comparar as várias configurações e encontrar o menor tamanho 
de arquivo que mantenha um nível de qualidade aceitável. Também é possível limitar o tamanho 
usando o assistente Otimizar para tamanho. 


Ao exportar GIFs animados ou rollovers JavaScript, o tamanho estimado do arquivo representa o 
tamanho total de todas as molduras. 


Nota: Para aumentar a velocidade de redesenho de Visualizar exportação, cancelar a seleção de Visualizar. Para 
interromper o redesenho da área de visualização ao alterar as configurações, pressionar Esc. 


Para exportar com o uso de Visualizar exportação: 


1 Selecionar Arquivo > Visualizar exportação para abrir a janela Visualizar exportação, caso ela 
não esteja aberta. 
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5 


Na base da caixa de diálogo, usar o botão Zoom para ampliar ou reduzir a visualização. Clicar 
nesse botão para ampliar a visualização. Pressionar Alt e clicar (Windows) ou pressionar Opção 
e clicar (Macintosh) no botão para reduzir. 


Executar um dos seguintes procedimentos para enquadrar a área de visualização: 
Na base da caixa de diálogo, clicar no botão Ponteiro e arrastar na visualização. 


Manter pressionada a barra de espaço quando o ponteiro Zoom estiver ativo e arrastar na 
visualização. 


Clicar em um botão de divisão de exibição para dividir a área de visualização em duas ou 
quatro áreas para comparar as configurações de otimização. 


O El [Æ] 


Cada janela de visualização pode exibir uma visualização do gráfico com configurações de 
exportação diferentes. 


Nota: Ao aplicar o zoom ou enquadrar com múltiplas exibições abertas, todas as exibições se ampliam/reduzem 
e se enquadram simultaneamente. 


Clicar no botão Assistente de Otimizar para o tamanho para otimizar um gráfico com base em um 
tamanho de arquivo de destino. Digitar um tamanho de arquivo, em kilobytes, e clicar em OK. 


Otimizar para o tamanho E3 


Tamanho do alvo: 2 k 


j Cancelar 


O Assistente de Otimizar para o tamanho tenta ajustar o tamanho do arquivo solicitado 
usando os seguintes métodos: 


Ajuste da qualidade do JPEG 

Modificação da suavização do JPEG 

Alteração do número de cores em imagens de 8 bits 

Alteração das configurações de pontilhamento em imagens de 8 bits 
Ativação ou desativação das configurações de otimização 

Clicar em Exportar ao concluir a alteração das configurações de otimização. 


Na caixa de diálogo Exportar, digitar um nome para o arquivo, selecionar um destino, definir 
quaisquer outras opções desejadas e clicar em Salvar. 


Para mais informações sobre as opções da caixa de diálogo Exportar, consultar “Exportação do 
Fireworks” na página 347. 
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Otimização no espaço de trabalho 


A exportação de gráficos para uso na Web é um processo com duas etapas: otimização e 
exportação. A otimização de gráficos assegura o balanço correto entre cor, compressão e qualidade. 
Depois de finalizar as configurações de otimização de um gráfico, ele está pronto para a 
exportação. 


Não será necessário usar o Assistente de exportação e Visualizar exportação no Fireworks caso haja 
familiaridade com a otimização e exportação de gráficos. O Fireworks tem recursos de otimização 
e exportação no espaço de trabalho que proporcionam maior controle sobre a forma de 
exportação de arquivos: 


e O painel Otimizar contém os controles principais para a otimização. Para formatos de arquivo 
de 8 bits, também existe uma tabela de cores que exibe as cores na paleta de cores de exportação 
atual. 


e Ao selecionar uma fatia, o Inspetor de propriedades apresenta o menu pop-up Configurações 
de exportação da fatia no qual é possível selecionar configurações de otimização predefinidas 
ou salvas. 


e As guias Visualização mostram como o gráfico a ser exportado apareceria com as configurações 
de otimização atuais. 


É possível otimizar o documento inteiro da mesma forma ou selecionar fatias individuais, ou áreas 
selecionadas de um JPEG, e atribuir configurações de otimização diferentes para cada um deles. 


Como usar configurações de otimização predefinidas 


É possível selecionar configurações de otimização comuns no Inspetor de propriedades ou no 
painel Otimizar para definir rapidamente o formato de um arquivo e aplicar várias configurações 
de formato específicas. Ao selecionar uma opção no menu pop-up Configurações, o restante das 
opções no painel Otimizar é definido automaticamente. Caso desejado, será possível ajustar ainda 
mais cada opção individualmente. 


GIF Web 216 

GIF WebSnap 256 

GIF WebSnap 128 
GlFadaptiveZ56 

JPEG - Melhor qualidade 
JPEG - menor arquivo 

GIF Animado Websnap 128 


Otimização e exportação 329 


Se for necessário um controle de otimização mais personalizado do que as predefinições oferecem, 
será possível criar configurações de otimização personalizadas no painel Otimizar. Também será 
possível modificar a paleta de cores de um gráfico com o uso da tabela de cores no painel Otimizar. 


Configuração: | GIF WebSnap 128 V| + — 


ar o o | Mate: 


| webSnap adaptativa v] Cores: |128 vi 
Perda: |o |M Ponti: [0x |M 


Sem transparência v 


Classificar por: Nenhum 4 
EgA ER” EE £a] 


Para selecionar uma otimização predefinida: 


No Inspetor de propriedades ou no painel Otimizar, selecionar uma predefinição no menu pop- 
up Configurações: 


GIF Web 216 força todas as cores para cores Websafe. A paleta de cores contém até 216 cores 
(consultar “Otimização de GIF, PNG, TIFF, BMP e PICT” na página 334). 


GIF WebSnap 256 converte cores não-Websafe em cores Websafe mais próximas. A paleta de 
cores contém até um máximo de 256 cores. 


GIF WebSnap 128 converte cores não-Websafe em cores Websafe mais próximas. A paleta de 
cores contém até 128 cores. 


GIF adaptativa 256 é uma paleta de cores que contém somente as cores reais usadas no gráfico. A 
paleta de cores contém até um máximo de 256 cores. 


JPEG - Melhor qualidade define a qualidade para 80 e a suavização para 0, resultando em um 
gráfico de alta qualidade, porém maior. 


JPEG - Arquivo menor define qualidade para 60 e a suavização para 2, resultando em um gráfico 
com menos da metade do tamanho de um JPEG - Qualidade melhor, mas com qualidade reduzida. 


GIF animado Websnap 128 define o formato do arquivo para GIF animado e converte cores não- 
Websafe em cores Websafe mais próximas. A paleta de cores contém até 128 cores. 


Para mais informações sobre tipos de arquivo, consultar “Seleção de um tipo de arquivo” na 
página 333. 
Para especificar configurações de otimização personalizadas: 


1 No painel Otimizar, selecionar uma opção no menu pop-up Formato de arquivo de 
exportação. 


2 Definir opções específicas do formato, como profundidade de cor, pontilhamento e qualidade. 


3 No menu de opções do painel Otimizar, selecionar outras configurações de otimização, caso 
necessário. 


Para mais informações sobre controles de otimização específicos, consultar as seções 
apropriadas em “Otimização no espaço de trabalho” na página 329. 
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4 É possível nomear e salvar configurações de otimização. Os nomes de configurações salvas são 
adicionados às configurações de otimização predefinidas no painel Otimizar, menu pop-up 
Configurações, e no Inspetor de propriedades quando as propriedades da fatia, do botão ou do 
documento são exibidas. Para mais informações, consultar “Como salvar e reutilizar uma 
configuração de otimização” na página 347. 

Para modificar a paleta de cores: 

Selecionar Janela > Otimizar para exibir e editar a paleta de cores de um documento. 


Para mais informações, consultar “Otimização de GIF, PNG, TIFF, BMP e PICT” na página 334. 


Para otimizar fatias individuais: 


1 Clicar em uma fatia para selecioná-la. Pressionar a tecla Shift e clicar para selecionar mais de 
uma fatia. 


2 Otimizar as fatias selecionadas com o uso do painel Otimizar. 


Visualização e comparação de configurações de otimização 


As guias de visualização exibem o gráfico tal como apareceria em um navegador da Web com base 
nas configurações de otimização. É possível visualizar os comportamentos de rollover e navegação, 
bem como animações. 


Original | visualização | 2paracima | 4paracima 


T Sem título-1.png & 100% DAR) 


A guia Original e as guias de visualização ficam no canto superior esquerdo da janela do documento. 


As guias de visualização exibem o tamanho total de um documento, o tempo de download 
estimado e o formato do arquivo. O tempo de download estimado é a quantidade de tempo 
média que levaria para efetuar a transferência de todas as fatias e molduras do documento com um 
modem de 56 Kbps. As visualizações 2 para cima e 4 para cima exibem informações adicionais 
que variam dependendo do tipo de arquivo selecionado. 


GIF (Documento, my. 0% pontilhamento 
352K Adaptativa 
Oseg a 56kbps 62 cores 


Visualização com a seleção de GIF como o tipo de arquivo 
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É possível usar o painel Otimizar para otimizar um documento enquanto o mesmo é visualizado, 
como na exibição Original. É possível otimizar o documento inteiro de uma só vez ou somente 
em fatias selecionadas. A sobreposição de fatias ajuda a diferenciar as fatias sendo otimizadas 
atualmente do resto do documento. A sobreposição de fatias exibe as áreas que não estão sendo 
otimizadas atualmente com uma coloração esmaecida, branca transparente. É possível ativar ou 
desativar a sobreposição de fatias. 


T Sem título-1.png @ 66%" 


Original || Visualização | 2paracima | 4 para cima | 


Original:Sem título JPEG (Fatia, mi) ~ 8Iqualidade 
T2.78K 33.91K 
5 seg a 56kbps 


2894450 | 66% q 


Ao otimizar uma fatia selecionada, as partes que não são otimizadas aparecem apagadas. 


Para visualizar um gráfico com base nas configurações de otimização atuais: 
Clicar na guia Visualização no canto superior esquerdo da janela do documento. 


Nota: No painel Ferramentas, clicar em Ocultar fatias e pontos ativos para ocultar fatias e guias de fatia durante a 
visualização. 


Para comparar exibições com configurações de otimização diferentes: 

1 Clicar na guia 2 para cima ou 4 para cima no canto superior esquerdo da janela do documento. 
2 Clicar em uma das visualizações de tela dividida para selecioná-la. 

3 No painel Otimizar, digitar as configurações. 


4 Selecionar as outras visualizações e especificar configurações de otimização diferentes para cada 
visualização para compará-las. 


Ao escolher as visualizações 2 para cima ou 4 para cima, a primeira exibe o documento PNG 
original do Fireworks, de forma a permitir a sua comparação com as versões otimizadas. E 
possível alternar essa exibição para exibir outra versão otimizada. 
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Para alternar qualquer exibição otimizada com uma original na visualização 2 para cima e 4 para 
cima: 


1 Selecionar uma exibição otimizada. 


2 No menu pop-up Visualização, na base da visualização, selecionar Original (Sem visualização). 


A Sem título-1.png & 50% 


Original | Visualização | Zparacima | 4 para cima | 


1 619 x 450 50% y 


Para alternar a exibição original com uma otimizada na visualização 2 para cima e 4 para cima: 
1 Selecionar a exibição que contém o original. 


2 No menu pop-up Visualização, selecionar Visualizar exportação. 


Para ocultar ou exibir uma sobreposição de fatia: 


Selecionar Exibir > Sobreposição de fatia. 


Seleção de um tipo de arquivo 


O usuário deve basear a seleção do formato de arquivo no design e uso do gráfico. A aparência de 
um gráfico pode variar de um formato para outro, especialmente ao usar tipos de compressão 
diferentes. Além disso, somente certos tipos de arquivos gráficos são aceitos pela maior parte dos 
navegadores da Web. Finalmente, outros tipos de arquivo são ideais para impressão ou uso em 
aplicativos de multimídia. 


Os seguintes tipos de arquivo estão disponíveis: 


GIF, Graphics Interchange Format, é um formato gráfico popular para a Web. GIFs contêm um 
máximo de 256 cores. Além disso, os GIFs podem conter uma área transparente e vários quadros 
para animação. Imagens com áreas de cor sólida podem se compactar mais ao serem exportadas 
como GIFs. Um GIF é geralmente ideal para imagens como desenhos, logotipos, imagens com 
áreas transparentes e animações. 
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JPEG, desenvolvido pelo Joint Photographic Experts Group especificamente para imagens 
fotográficas ou com cores de alta densidade. O formato JPEG suporta milhões de cores (24 bits). 
O formato JPEG é o melhor para fotografias digitalizadas, imagens que usam texturas, imagens 
com transição de cores de dégradé e qualquer imagem que exija mais de 256 cores. 


PNG, Portable Network Graphic, é um formato gráfico versátil para a Web. Porém, nem todos os 
navegadores da Web podem visualizar gráficos PNG. O formato PNG pode suportar cores de até 
32 bits, conter transparência ou um canal alfa e ser progressivo. PNG é o formato de arquivo 
nativo do Fireworks. Porém, arquivos PNG Fireworks contêm informações específicas do 
aplicativo que não são armazenadas em um arquivo PNG exportado ou em arquivos criados em 
outros aplicativos. 


WBMP Wireless Bitmap, é um formato gráfico criado para dispositivos de computação móveis, 
como telefones celulares e PDAs (Personal Digital Assistant, assistente pessoal digital). Esse 
formato é usado especificamente em páginas WAP (Wireless Application Protocol, protocolo de 
aplicações sem fio). O WBMP tem um formato de 1 bit e, dessa forma, somente duas cores são 
visíveis: preto e branco. 


TIFF, Tagged Image File Format, é um formato gráfico usado para armazenar imagens de bitmap. 
TIFFs são usados com maior fregiiência em publicações impressas. Muitos aplicativos de 
multimídia também aceitam gráficos TIFF importados. 


BMP formato de arquivo gráfico da Microsoft Windows, é um formato de arquivo comum usado 
para exibir imagens de bitmap. BMPs são usados primariamente no sistema operacional 
Windows. Muitos aplicativos podem importar imagens BMP. 


PICT, desenvolvido pela Apple Computer, é um formato de arquivo gráfico normalmente usado 
no sistema operacional Macintosh. A maioria dos aplicativos para Mac pode importar imagens 


PICT. 


Otimização de GIF, PNG, TIFF, BMP e PICT 


Cada formato de arquivo gráfico no Fireworks tem um conjunto de opções de otimização. Para a 
maior parte, somente os tipos de arquivo de 8 bits, como GIF, PNG 8, TIFF 8, BMP 8 e PICT 8, 


oferecem um volume significativo de controle sobre a otimização. 


Nota: O formato JPEG é uma exceção. Para mais informações sobre controles de otimização de JPEG, consultar 
“Otimização de um JPEG” na página 343. 


As configurações de otimização do Fireworks são semelhantes para todos os formatos de arquivo 
gráfico de 8 bits. Para formatos de arquivo para a Web, como GIF e PNG, também é possível 
especificar a quantidade de compressão desejada para o gráfico. 


Configuração: | GIF WebSnap 128 V| + — 


GIF v| Mate: | J 
webSnap adaptativa v] Cores: [res v | 
Perda: 0 ly Pontil: [0x Im 


Sem transparência v | 


Classificar por: Nenhum w | [C Reconstruir 
earar E] 
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É possível otimizar tipos de arquivo de 8 bits através do ajuste de suas paletas de cores. Menos 
cores na paleta representam menos cores na imagem, resultando em um tamanho de arquivo 
menor. O inconveniente da redução de cores é que ela também reduz a qualidade da imagem. 


À medida que experimenta configurações de otimização diferentes, o usuário pode usar as 
visualizações 2 para cima e 4 para cima para testar e comparar a aparência e o tamanho estimado 
de um arquivo gráfico. Para mais informações sobre como usar as guias de visualização, consultar 
“Visualização e comparação de configurações de otimização” na página 331. 

Como escolher uma paleta de cores 


GIFs e outros formatos de imagem de 8 bits exportados contêm uma paleta de cores. A paleta de 
cores é uma lista de até 256 cores disponíveis para o arquivo. Somente as cores definidas na paleta 
de cores aparecem na imagem gráfica, porém algumas paletas de cores contêm cores que não estão 
no gráfico. 


As seguintes paletas estão disponíveis no Fireworks: 


Adaptativa é uma paleta personalizada derivada das cores reais do documento. As paletas 
adaptativas frequentemente produzem imagens com a melhor qualidade. 


Adaptativa WebSnap é uma paleta adaptativa na qual as cores próximas às cores Websafe 
são convertidas na cor Websafe mais próxima. Cores Websafe são aquelas que têm como origem 


a paleta Web216. 


Web 216 é uma paleta com as 216 cores comuns aos computadores Windows e Macintosh. Essa 
paleta é muitas vezes denominada paleta Websafe ou à prova de navegador, pois produz resultados 
razoavelmente consistentes em vários navegadores da Web em qualquer plataforma, quando 
exibidas em monitores de 8 bits. 


Exata contém as cores exatas usadas na imagem. Somente as imagens contendo 256 cores ou menos 
podem usar a paleta Exata. Se a imagem contiver mais de 256 cores, a paleta será alternada para 
Adaptativa. 


Sistema (Windows) e Sistema (Macintosh) cada uma contém 256 cores definidas pelos padrões da 
plataforma Windows ou Macintosh, respectivamente. 


Tons de cinza é uma paleta de 256 (ou menos) tons de cinza. A escolha dessa paleta converterá a 
imagem exportada para tons de cinza. 


Preto e branco é uma paleta de duas cores, somente preto e branco. 
Uniforme é uma paleta matemática baseada em valores RGB de pixel. 


Personalizada é uma paleta que foi modificada ou carregada de uma paleta externa (arquivo ACT) 
ou um arquivo GIF. 


O ajuste da paleta de cores durante a otimização afeta as cores da imagem exportada. É possível 
otimizar e personalizar paletas de cores com o uso da tabela de cores no painel Otimizar. 
Para selecionar uma paleta de cores: 


No menu pop-up Paleta indexada do painel Otimizar, selecionar uma opção. 


Para importar uma paleta personalizada: 
1 Seguir uma das seguintes opções: 


* No menu de opções do painel Otimizar, selecionar Carregar paleta. 
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e No menu pop-up Paleta indexada do painel Otimizar, selecionar Personalizada. 
2 Navegar até um arquivo de paleta ACT ou GIF e clicar em Abrir. 


Nota: Os usuários de Windows devem selecionar Arquivos GIF no menu pop-up Arquivos do tipo para ver 
arquivos com extensão .gif na caixa de diálogo Abrir. 


As cores dos arquivos ACT ou GIF são adicionadas à tabela de cores no painel Otimizar. 


Configuração da intensidade da cor 


Intensidade de cor é o número de cores da imagem gráfica exportada. É possível tornar os 
arquivos menores com a redução do número de cores usadas. A redução da intensidade da cor 
remove algumas cores da imagem a partir daquelas menos usadas. Os pixels que contêm as cores 
descartadas são convertidos nas cores mais próximas restantes na paleta. Isto pode reduzir a 
qualidade da imagem. 


Nota: A opção de intensidade da cor está disponível somente para os formatos de arquivo gráfico GIF e outros de 8 bits. 


Para selecionar uma intensidade de cor: 


No menu pop-up Cores do painel Otimizar, selecionar uma opção ou digitar um valor na caixa de 
texto. É possível selecionar de 2 até 256 cores. 


4 vot 
Configuração: | GIF WebSnap 128 Y| + — 


GIF v| Mate: 


webSnap adaptativa Y 


Perda: |0 “ly Pontil: 


Sem transparência 


Classificar por: Menhum 2 | 128 cores 


ER ER Eat + 


Dica: As cores reais na imagem podem ser menos do que o número máximo de cores selecionadas. O número na 
base da tabela de cores indica o número real de cores visíveis na imagem. Se não houver nenhum número visível, 
aparecerá o botão Reconstruir, o que indicará a necessidade de se reconstruir a paleta de cores. Para mais 
informações, consultar “Exibição de cores em uma paleta” na página 337. 


Para selecionar uma intensidade de cor além de 256 cores: 


No menu pop-up Formato de arquivo de exportação do painel Otimizar, selecionar um formato de 
arquivo de 24 ou 32 bits. 


Nota: As intensidades de cor maiores criam arquivos exportados maiores e normalmente não são ideais para 
imagens gráficas da Web. Usar somente intensidades de cor de 24 ou 32 bits ao exportar imagens fotográficas 
com tons contínuos ou misturas de cores com dégradé complexo. Para gráficos com alta intensidade de cor para a 
Web, usar o formato JPEG. Para mais informações, consultar “Otimização de um JPEG” na página 348. 
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Remoção de cores não usadas 
A remoção de cores não usadas de uma imagem antes da exportação diminui o tamanho do arquivo. 


Nota: Esta opção está disponível somente para os formatos de arquivo gráfico GIF e outros de 8 bits. 


Para remover cores não usadas: 
No menu de opções do painel Otimizar, selecionar Remover cores não usadas. 


Cancelar a seleção de Remover cores não usadas para incluir todas as cores na paleta, inclusive 
aquelas que não estejam na imagem exportada. 


Como pontilhar para aproximar cores perdidas 


O pontilhamento aproxima cores que não estão na paleta atual através da alternância de pixels 
coloridos de maneira semelhante. A uma certa distância, as cores se misturam para criar a 
aparência da cor ausente. O pontilhamento é especialmente útil ao exportar imagens com 
misturas ou dégradés complexos, ou imagens fotográficas, para um formato de arquivo gráfico de 
8 bits, como o GIF 


O pontilhamento pode aumentar sensivelmente o tamanho do arquivo. 

Nota: A opção de pontilhamento está disponível somente para os formatos de arquivo gráfico GIF, outros de 8 bits 
e WBMP. 

Para pontilhar um gráfico: 


Na caixa de texto Pontilhamento do painel Otimizar, digitar um valor percentual. 


Exibição de cores em uma paleta 


A tabela de cores no painel Otimizar exibe as cores na visualização atual ao trabalhar com cores de 
8 bits ou menos, e permite modificar a paleta de uma imagem. A tabela de cores atualiza-se 
automaticamente no modo de Visualização. Ela aparecerá vazia ao otimizar mais do que uma fatia 
ao mesmo tempo ou ao otimizar um formato de 8 bits, como o GIF. 


Configuração: | 


GIF v| Mate: 


WebSnap adaptativa w| Cores: |128 x] 


Perda: |0 v Pontil: A { 


Sem transparência b- | 


Classificar por: Nenhum 4 | 128 cores 


RE a 
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Vários símbolos pequenos aparecem em alguns exemplos de cores, indicando certas características 
de cores individuais, como segue: 


Este símbolo Indica que 


A cor foi editada, afetando somente o documento exportado. Isto não altera a cor no documento 
de origem. 


Acor é transparente. 


E] 
Ld A cor está bloqueada. 
E 


A cor é Websafe. 


FE A cor tem múltiplos atributos. Neste caso, a cor é Websafe, está bloqueada e foi editada. 


Se o documento for editado, a Tabela de cores poderá não mostrar mais todas as cores do 
documento. Se isto ocorrer, será necessário reconstruir a tabela de cores. Um botão Reconstruir 
aparecerá na base do painel Otimizar quando for necessário reconstruir a tabela de cores. 

Para reconstruir a tabela de cores para que reflita as edições no documento: 

Na base do painel Otimizar, clicar em Reconstruir. 

Quando a tabela estiver reconstruída, o botão Reconstruir desaparecerá e o número real de cores 
usado na imagem será exibido em seu lugar. 

Para selecionar uma cor: 


Na tabela de cores do painel Otimizar, clicar na cor. 


Para selecionar múltiplas cores: 


Pressionar a tecla Control e clicar (Windows) ou Comando e clicar (Macintosh) nas cores. 


Para selecionar uma faixa de cores: 
1 Clicar em uma cor. 


2 Pressionar a tecla Shift e clicar na última cor da faixa que se deseja selecionar. 


Para visualizar todos os pixels no documento que contenham uma cor específica: 
1 Clicar na guia Visualização da janela do documento. 
2 Na tabela de cores do painel Otimizar, clicar e manter o mouse sobre um exemplo. 


Os pixels contendo o exemplo selecionado mudarão temporariamente para outra cor de realce 
até o usuário soltar o botão do mouse. 


Nota: Ao visualizar pixels no documento com o uso das exibições 2 para cima ou 4 para cima, selecionar uma 
exibição diferente de Original. 
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Como bloquear cores em uma paleta 


É possível bloquear cores individuais para não permitir sua remoção ou alteração ao alternar entre 
paletas ou reduzir o número de cores de uma paleta. Ao alternar para outra paleta depois de 
bloquear cores, estas são adicionadas à nova paleta. 

Para bloquear uma cor selecionada: 


e Na base do painel Otimizar, clicar no botão Bloquear cor. 


Para desbloquear uma cor: 
1 Na tabela de cores do painel Otimizar, selecionar uma cor bloqueada. 


2 No painel Otimizar, clicar no botão Bloquear cores. 


Para desbloquear todas as cores: 


No menu de opções do painel Otimizar, selecionar Desbloquear todas as cores. 


Edição de cores em uma paleta 
É possível alterar uma cor na paleta editando-a na tabela de cores do painel Otimizar. A edição da 
cor substitui todas as ocorrências da mesma na imagem a ser exportada. À edição não substitui a 
cor na imagem original. 
Para editar uma cor: 
1 Executar um dos seguintes procedimentos para abrir o seletor de cores do sistema: 
e No botão Editar cor na base do painel Otimizar, selecionar uma cor e clicar. 
e Na tabela de cores, clicar duas vezes em uma cor. 
2 Alterar a cor com o uso do seletor de cores do sistema. 
A nova cor substitui cada ocorrência da cor substituída na área de visualização. 


Nota: Clicar com o botão direito (Windows) ou pressionar Control e clicar (Macintosh) em uma cor da paleta 
para exibir um menu de atalho de opções de edição para a cor. 


Como usar uma cor Websafe 


As cores Websafe são cores comuns às plataformas Macintosh e Windows. Essas cores não ficam 
pontilhadas quando exibidas em um navegador da Web na tela de um computador configurada 
para 256 cores. 


O Fireworks tem diversos métodos de aplicação e uso de cores Websafe. 


Para forçar todas as cores para cores Websafe: 


No menu pop-up Paleta indexada do painel Otimizar, selecionar Web 216. 


Para criar uma paleta adaptativa com cores semelhantes às Websafe: 
Selecionar a paleta WebSnap adaptativa. 


As cores não-Websafe que estejam próximas às cores Websafe serão convertidas em cores Websafe 
mais próximas. 
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Para forçar uma cor para a Websafe mais próxima equivalente: 

1 Na tabela de cores do painel Otimizar, selecionar uma cor. 

2 Clicar no botão Alinhar pela cor Websafe. 
A alteração das cores para Websafe no painel Otimizar afeta somente sua versão exportada, não 
a imagem real. 

Como salvar uma paleta 


É possível salvar paletas personalizadas como arquivos externos de paleta. E possível usar paletas 
salvas com outros documentos do Fireworks ou em outros aplicativos que suportem arquivos 
externos de paleta, como o Adobe Photoshop, Macromedia FreeHand e Flash 5. Os arquivos de 
paleta têm a extensão .act. 

Para salvar uma paleta de cores personalizada: 

1 No menu de opções do painel Otimizar, selecionar Salvar paleta. 

2 Digitar um nome para a paleta e selecionar uma pasta de destino. 


3 Clicar em Salvar. 


É possível carregar o arquivo salvo da paleta no painel Exemplos ou no painel Otimizar para 
usá-lo ao exportar outros documentos. 


Como ajustar a compressão 


É possível comprimir arquivos GIF, para torná-los ainda menores do que o normal, alterando sua 
configuração de perda. Configurações maiores de perda produzem arquivos menores, mas com 
uma qualidade de imagem inferior. Uma configuração de perda entre 5 e 15 geralmente produz os 
melhores resultados. 


GIF original; valor de perda de 30; valor de perda de 100 


Para alterar a compressão de um GIF: 


No painel Otimizar, digitar uma configuração para Perda. 
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Como tornar áreas transparentes 


É possível definir áreas transparentes tanto em GIFs como em PNGs de 8 bits de maneira que, em 
um navegador da Web, o fundo da página da Web fique visível através dessas áreas. No Fireworks, 
um quadriculado cinza e branco nas guias de visualização indica as áreas transparentes. 


Visualização de imagem otimizada no Fireworks; imagem exportada com transparência e colocada em 
uma página da Web com um fundo colorido 


Nota: Os PNGs de 32 bits contêm a transparência automaticamente, embora, no painel Otimizar, não apareça uma 
opção de transparência para esses PNGs. 


O usuário deve usar o recurso transparência do índice ao exportar imagens GIF que contenham 
áreas transparentes. Com a transparência do índice, é possível definir cores específicas que serão 
transparentes na exportação. A transparência do índice ativa ou desativa pixels com valores de cor 
específicos. Como o formato GIF suporta a transparência do índice, esta é a forma mais comum 
de transparência usada na Web. 


Nota: Por padrão, as imagens GIF são exportadas sem transparência no Fireworks. Embora a tela atrás de uma 
imagem ou objeto apareça transparente na exibição Original no Fireworks, isto não significa que o fundo daquela 
imagem será transparente ao ser exportada como um GIF para uso na Web. Será necessário selecionar 
Transparência do índice antes da exportação. 


Também é possível usar a transparência alfa, embora não seja usada com fregiência em gráficos da 
Web porque somente o formato PNG a suporta e a maioria dos navegadores da Web não suporta 
esse formato. À transparência alfa é usada com fregiência em gráficos exportados que contêm 
transparência dégradé e pixels semi-opacos. A transparência alfa também se torna útil ao exportar 
arquivos para o Macromedia Flash ou Director, porque ambos os aplicativos suportam esse tipo 
de transparência. 

Nota: A configuração de cores para transparências afeta somente a versão exportada da imagem, não a imagem 


real. É possível ver qual a aparência da imagem exportada em uma visualização. Para mais informações sobre as 
guias de visualização, consultar “Visualização e comparação de configurações de otimização” na página 331. 


Para selecionar uma cor para transparência: 


1 Clicar nas guias Visualizar, 2 para cima ou 4 para cima. Nas guias 2 para cima ou 4 para cima, 
clicar em uma exibição diferente do original. 


2 No menu pop-up Transparência, na base do painel Otimizar, selecionar Transparência do 
índice. 


A cor da tela torna-se transparente na visualização. 
Para selecionar uma cor diferente, clicar no botão Selecionar cor transparente. 


O ponteiro se torna um conta-gotas. 
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4 Executar um dos seguintes procedimentos para selecionar a cor para torná-la transparente: 
e Na tabela de cores do painel Otimizar, clicar em um exemplo de cor. 


e Clicar em uma cor no documento. 


Para adicionar ou remover cores transparentes: 


1 Clicar nas guias Visualizar, 2 para cima ou 4 para cima. Nas guias 2 para cima ou 4 para cima, 
clicar em uma exibição diferente do original. 


Nota: É possível adicionar ou remover cores transparentes na exibição Original, mas os resultados somente 
poderão ser vistos ao se exibir uma visualização. 


2 No painel Otimizar, clicar no botão Adicionar cor à transparência ou Remover cor da transparência. 


=| e 


3 Executar um dos seguintes procedimentos para selecionar outra cor para torná-la transparente 
ou para removê-la da transparência: 


e Na tabela de cores do painel Otimizar, clicar em um exemplo de cor. 


e Clicar em uma cor na visualização. 


Para tornar o fundo de uma imagem transparente: 


1 Clicar nas guias Visualizar, 2 para cima ou 4 para cima. Nas guias 2 para cima ou 4 para cima, 
clicar em uma exibição diferente do original. 


2 No menu pop-up Selecionar tipo de transparência, selecionar GIF como o formato de arquivo 
no painel Otimizar e selecionar Transparência do índice. 


A cor da tela torna-se transparente na visualização e o gráfico está pronto para ser exportado. 


Entrelaçamento: download gradual 


Quando exibidas em um navegador da Web, as imagens entrelaçadas aparecem gradualmente à 
medida que se descarregam. Primeiro, são exibidas com baixa resolução, passando para a resolução 
total ao se concluir o download. 

Nota: Esta opção está disponível somente para formatos de arquivo GIF e PNG. É possível obter resultados 


semelhantes com um JPEG transformando-o em progressivo. Para mais informações, consultar “Otimização de um 
JPEG” na página 348. 


Para entrelaçar um GIF ou PNG exportado: 


No menu de opções do painel Otimizar, selecionar Entrelaçado. 
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Otimização de um JPEG 


Com o uso do painel Otimizar, é possível otimizar JPEGs através da configuração das opções de 
compressão e suavização. 


Configuração: JPEG -Melhorq Y| + — 


JPEG v| Mate: [4 


Qualidade: [80 |M 


Qualidade seletiva: | 0 ] Ed 


Suavização: 0 y 


Classificar por: Nenhum 0 cores 


SCA B 


O formato JPEG sempre é salvo com cores de 24 bits e, assim, não é possível otimizar um JPEG 


com a edição de sua paleta de cores. A tabela de cores fica vazia quando o usuário seleciona uma 
imagem JPEG. 


À medida que experimenta configurações de otimização diferentes, o usuário pode usar as 
visualizações 2 para cima e 4 para cima para testar e comparar a aparência e o tamanho estimado 
de um arquivo gráfico JPEG. Para mais informações sobre como usar as guias de visualização, 
consultar “Visualização e comparação de configurações de otimização” na página 331. 


Ajuste da qualidade do JPEG 


JPEG é um formato com muita perda, o que significa que alguns dados da imagem são 
descartados quando comprimidos, com a redução da qualidade do arquivo final. Entretanto, os 
dados de imagem geralmente podem ser descartados com pouca ou nenhuma diferença 
perceptível em qualidade. 


Imagem original; configuração de qualidade em 50; configuração de qualidade em 20 


Para controlar a quantidade de perda de qualidade ao comprimir um arquivo JPEG para 
exportação: 


No menu pop-up Qualidade no painel Otimizar, ajustar a qualidade com o controle deslizante. 


* A configuração de uma porcentagem alta mantém a qualidade da imagem, mas comprime 
menos, produzindo arquivos maiores. 
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e A configuração de uma porcentagem baixa produz um arquivo menor, mas com uma qualidade 
de imagem inferior. 


Compressão seletiva de áreas de um JPEG 


A compressão seletiva de um JPEG permite comprimir áreas diferentes de um JPEG em níveis 
diferentes. Áreas de interesse particular em uma imagem podem ser comprimidas em um nível 
elevado. Áreas de menor importância, como fundos, podem ser comprimidas em um nível 
inferior, reduzindo o tamanho global da imagem, mantendo a qualidade das áreas mais 
interessantes. 


A área selecionada nesta imagem está sendo comprimida com um nível de qualidade de 90, enquanto a 
área não selecionada está sendo comprimida com um nível de qualidade de 50. 


Para comprimir áreas selecionadas de um JPEG: 


1 Na exibição Original, selecionar uma área do gráfico para compressão com o uso de uma das 
ferramentas Moldura. 


N 


Selecionar Modificar > JPEG seletiva > Salvar seleção como máscara JPEG. 


(o) 


No menu pop-up Formato de arquivo de exportação do painel Otimizar, selecionar JPEG, caso 
não esteja selecionado. 


4 No painel Otimizar, clicar no botão Editar opções de qualidade seletiva. 
A caixa de diálogo Configuração de JPEG seletiva aparece. 
5 Selecionar Ativar qualidade seletiva e digitar um valor de compressão na caixa de texto. 


A digitação de um valor baixo para compacta a área seletiva do JPEG mais do que o resto da 
imagem. A digitação de um valor alto comprime a área seletiva do JPEG menos do que o resto 
da imagem. 


6 É possível alterar a Cor de sobreposição para a área de JPEG seletiva, caso desejado. Isto não afeta 
a saída. 


7 Selecionar Preservar qualidade do texto. Todos os itens do texto serão automaticamente 
exportados em um nível superior, independente do valor Qualidade seletiva. 


8 Selecionar Preservar qualidade do botão. Todos os símbolos de botão serão automaticamente 
exportados em um nível superior. 


9 Clicar em OK. 
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Para modificar a área de compressão de um JPEG seletiva: 
1 Selecionar Modificar > JPEG seletiva > Restaurar máscara JPEG como seleção. 
A seleção é realçada. 


2 Usar a ferramenta Moldura ou outra ferramenta de seleção para efetuar alterações no tamanho 
da área. 


3 Selecionar Modificar > JPEG seletiva > Salvar seleção como máscara JPEG. 
4 No painel Otimizar, alterar as configurações de qualidade seletiva, se desejado. 


Nota: Para desfazer uma seleção, selecionar Modificar > JPEG seletiva > Remover máscara JPEG. 


Como embaçar ou aguçar um detalhe 


É possível definir a Suavização no painel Otimizar para ajudar a diminuir o tamanho de arquivos 
JPEG. A suavização embaça bordas acentuadas, que não são bem comprimidas em JPEGs. 
Números maiores produzem mais embaçamento no JPEG exportado, criando, normalmente, 
arquivos menores. Uma configuração de suavização de aproximadamente 3 reduz o tamanho da 
imagem, mantendo, porém, uma qualidade razoável. 

Para ajudar a preservar as bordas finas entre duas cores: 

No menu de opções do painel Otimizar, selecionar Aguçar bordas JPEG. 


Usar Aguçar bordas JPEG ao exportar arquivos JPEG com texto ou detalhes finos para manter a 
nitidez dessas áreas. A seleção de Aguçar bordas JPEG aumenta o tamanho do arquivo. 


Como usar JPEGs progressivos 

JPEGs progressivos, como GIFs e PNGs entrelaçados, são exibidos com uma resolução menor e, 
em seguida, aumentam sua qualidade à medida que se efetua seu download. 

Para exportar um JPEG progressivo: 

No menu de opções do painel Otimizar, selecionar JPEG progressivo. 


Nota: Alguns aplicativos de edição de bitmap não abrem arquivos JPEG progressivos. 


Como igualar a cor de fundo de um destino 


A suavização de serrilhado faz com que um objeto apareça mais suave através da mistura da cor do 
objeto com o fundo sobre o qual está colocado. Por exemplo, se o objeto for preto e a página na 
qual ele estiver for branca, a suavização de serrilhado adicionará vários tons de cinza aos pixels que 
contornam a borda do objeto, fazendo uma transição suave entre o preto e o branco. 
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Com a configuração da opção Mate no painel Otimizar, é possível suavizar o serrilhado de objetos 
que repousam diretamente sobre a tela com a cor Mate. Isto é útil ao exportar gráficos para 
aparecer em páginas da Web com fundos coloridos. 


Para igualar a cor do fundo do destino: 


No painel Otimizar, selecionar uma cor no menu pop-up Mate. Igualá-la o máximo possível à cor 
do fundo do destino sobre o qual o gráfico exportado será colocado. 


Nota: A suavização de serrilhado aplica-se somente a objetos com bordas suaves que permanecem diretamente 
no topo da tela. 


Remoção de auréolas 


Em uma imagem que tenha sofrido suavização de serrilhado anteriormente, os pixels da suavização 
de serrilhado permanecem ao tornar a cor da tela transparente. Assim, quando o usuário exportar o 
gráfico e colocá-lo em uma página da Web com uma cor de fundo diferente, os pixels do perímetro 
do objeto com suavização de serrilhado poderão aparecer no fundo da página da Web. Esses pixels 
formam a auréola, que pode ser observada especialmente em um fundo escuro. 


O usuário pode impedir com facilidade a formação de auréolas em arquivos PNG nativos do 
Fireworks e em arquivos importados do Photoshop. Porém, para alguns arquivos exportados, 
como GIF, é necessário remover a auréola manualmente. 


Para impedir a formação de auréolas em arquivos PNG nativos do Fireworks e em arquivos 
importados do Photoshop, proceder da seguinte forma: 


e Definir a Cor da tela no Inspetor de propriedades ou a Cor mate no painel Otimizar para a cor 


do fundo da página da Web de destino. 

* Como objeto que se deseja exportar selecionado, selecionar Acentuado no menu pop-up 
Borda do Inspetor de propriedades. 

Para remover uma auréola de um GIF ou outro arquivo gráfico exportado manualmente: 


1 Com o arquivo aberto no Fireworks, clicar na guia Visualização, 2 para cima ou 4 para cima. 
Nas guias 2 para cima ou 4 para cima, clicar em uma exibição diferente do original. 


2 No menu pop-up Selecionar tipo de transparência do painel Otimizar, selecionar 
Transparência do índice. 


3 Clicar no botão Adicionar cor à transparência e clicar em um pixel na auréola. 


Todos os pixels da mesma cor são removidos na Visualização. 


4 Sea auréola ainda aparecer, repetir a etapa 3 até que desapareça. 
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Como salvar e reutilizar uma configuração de otimização 


É possível salvar configurações de otimização personalizadas para uso futuro em uma otimização 
ou processamento em lote. O salvamento de predefinições personalizadas armazena as seguintes 
informações: 


e Configurações e tabela de cores no painel Otimizar 


e Configurações de retardo de moldura selecionadas no painel Molduras (somente para animações) 


Para salvar configurações de otimização como uma predefinição: 


1 No painel Otimizar, clicar no botão Salvar configurações atuais. 


2 Digitar um nome para a predefinição de otimização e clicar em OK. 


As configurações de otimização salvas aparecem na base do menu pop-up Configurações do 
painel Otimizar e no Inspetor de propriedades. Elas ficam disponíveis em todos os documentos 
subsegiientes. O arquivo da predefinição é salvo na pasta Export Settings do disco rígido. 


Nota: A localização exata da pasta Export Settings varia em função do sistema operacional. Para mais 
informações, consultar “Como trabalhar com arquivos de configuração” na página 427. 


Para compartilhar uma configuração de otimização salva com outro usuário do Fireworks: 


Copiar o arquivo de predefinição de otimização salvo da pasta Export Settings do Fireworks para 
a mesma pasta no outro computador. 


Para excluir uma otimização predefinida personalizada: 


1 No menu pop-up Configurações salvas do painel Otimizar, selecionar a configuração de 
otimização que se deseja excluir. 


E] 2 No painel Otimizar, clicar no botão Excluir configuração salva. 


Não é possível excluir uma configuração predefinida do Fireworks. 


Exportação do Fireworks 


A exportação a partir do Fireworks é um processo com duas etapas. Primeiro é necessário otimizar 
o gráfico ou documento para a exportação. Depois de otimizar o gráfico ou documento, é possível 
exportá-lo. Para mais informações sobre otimização, consultar “Sobre otimização” na página 325. 


É possível exportar gráficos do Fireworks de várias formas. É possível exportar um documento 
como uma imagem simples nos formatos GIF, JPEG ou outro formato de arquivo gráfico, 
exportar o documento inteiro como um arquivo HT'ML e arquivos de imagem associados, ou 
exportar somente fatias selecionadas. Também é possível exportar somente uma área específica de 
um documento. Além disso, é possível exportar molduras e camadas do Fireworks como arquivos 
de imagem separados. 
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Exportação de uma imagem simples 


Usar o comando Arquivo > Exportar para exportar um gráfico depois de concluir a otimização no 


espaço de trabalho. 


Exportar 


Salvarem: | © images 10 f e m 


ic19.jpg @ pic25.jpg 
ic20.jpg @ pic26.jpg 
ic21.jpg @ pic27.jpg 
ic22.jpg @ pic28.jpg 
ic23.jpg @ pic42.jpg 
ic24.jpg @ pic43.jpg 


mo pic07.jpg m pic13.jpg 
o pic02.jpg  picO8.jpg a pic14.jpg 
a pic03.jpg a pic09.jpg a pic15.jpg 
Æ pic04.jpg @ pic10.jpg æ pic16.jpg 
mm pic05.jpg @ pic11.jpg m pic17.jpg 
@ pic06.jpg a pic12.jpg @ pic18.jpg 


BB BB, 


< 


Nome do arquivo: Sem título-1. gif 


Arquivos do tipo: Somente imagens 


HTML: 


Fatias: 


Caixa de diálogo Exportar 


Nota: Para exportar somente imagens específicas dentro de um documento, primeiro é necessário fatiá-lo e, em 
seguida, exportar somente as fatias desejadas. Para mais informações, consultar “Exportação de fatias 
selecionadas” na página 349. 


Para exportar um documento do Fireworks como uma imagem simples: 
1 Selecionar Arquivo > Exportar. 
2 Selecionar um local em que exportar o arquivo de imagem. 
Para gráficos da Web, o melhor local é uma pasta dentro do site local da Web. 


3 Digitar um nome de arquivo. Não é necessário digitar uma extensão de arquivo; o Fireworks 
fará isso na exportação com o uso do tipo de arquivo especificado nas configurações de 
otimização. Para mais informações sobre otimização, consultar “Sobre otimização” na 
página 325. 


4 No menu pop-up Salvar como tipo, selecionar Somente imagens. 


5 Clicar em Salvar. 


Exportação de um documento fatiado 


Por padrão, ao exportar um documento fatiado do Fireworks, são exportados um arquivo HTML 
e as imagens associadas. O arquivo HTML exportado pode ser exibido em um navegador da Web 
ou ser importado em outros aplicativos para edição posterior. 
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Nota: É possível obter um HTML do Fireworks em outros aplicativos com o uso de várias técnicas. Para mais 
informações sobre HTML e as outras maneiras de se exportar HTML do Fireworks, consultar “Exportação de 
HTML” na página 352. 


Antes de exportar, é necessário certificar-se de selecionar o estilo de HT'ML apropriado na caixa 
de diálogo Configuração do HTML. Para mais informações, consultar “Configuração de opções 
de exportação de HTML” na página 359. 

Para exportar um documento fatiado do Fireworks: 

1 Selecionar Arquivo > Exportar. 

2 Navegar até a pasta Nav Menu no disco rígido. 

3 No menu pop-up Salvar como tipo, selecionar HTML e imagens. 


4 Digitar um nome de arquivo nas caixas Nome do arquivo (Windows) ou Salvar como 
(Macintosh). 


No menu pop-up HTML, selecionar Exportar arquivo HTML. 
No menu pop-up Fatias, selecionar Exportar fatias. 


(opcional) Selecionar Colocar imagens na subpasta. 


© N o a 


Clicar em Salvar. 


Os arquivos do Fireworks exportados aparecem no disco rígido. As imagens e um arquivo 
HTML são gerados no local especificado na caixa de diálogo Exportar. Para mais informações 
sobre as opções disponíveis na caixa de diálogo Exportar ao selecionar HT'ML e imagens como 
o tipo de arquivo, consultar “Exportação de HTML do Fireworks” na página 354. 


Exportação de fatias selecionadas 


É possível exportar fatias selecionadas em um documento do Fireworks. Pressionar a tecla Shift e 
clicar para selecionar várias fatias. 


Nota: Para mais informações sobre fatiamento, consultar “Criação e edição de fatias” na página 201. 


Para exportar fatias selecionadas: 
1 Seguir uma das seguintes opções: 
è Selecionar Arquivo > Exportar. 


e Para exportar uma fatia individual, clicar com o botão direito do mouse (Windows) ou 
pressionar Control e clicar (Macintosh) na fatia, e selecionar Exportar fatia selecionada. 


2 Selecionar uma localização na qual armazenar os arquivos exportados. 
Normalmente, o melhor local é uma pasta dentro do site local da Web. 


3 Digitar um nome de arquivo. Não é necessário digitar uma extensão; o Fireworks faz isso 
automaticamente. 


Ao exportar múltiplas fatias, o Fireworks usa o nome digitado como o nome-raiz para todos os 
gráficos exportados, menos para aqueles com nomes personalizados com o uso do painel 
Camadas ou o Inspetor de propriedades. 


4 Selecionar Exportar fatias no menu pop-up Fatias. 


5 Para exportar somente fatias selecionadas antes da exportação, selecionar Apenas fatias 
selecionadas e certificar-se de não selecionar a opção Incluir áreas sem fatias. 
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6 Clicar em Salvar. 


Cada fatia será exportada com suas configurações de otimização, tal como definidas no painel 
Otimizar. Para mais informações sobre otimização, consultar “Sobre otimização” na página 325. 


Atualização de uma fatia 


Se um documento fatiado foi exportado e se foram feitas alterações ao documento original no 
Fireworks depois de exportá-lo, o usuário poderá atualizar somente a imagem ou fatia alterada 
sem a necessidade de exportar e carregar a imagem fatiada inteira. Recomenda-se usar a nomeação 
personalizada de fatias para permitir localizar com facilidade a fatia a ser substituída. Para mais 
informações, consultar “Nomeação de fatias” na página 278. 

Para atualizar uma fatia simples: 

1 Esconder a fatia e editar a área debaixo dela. 

2 Exibir a fatia novamente e selecioná-la. 

3 Selecionar Arquivo > Exportar. 

4 Selecionar Apenas fatias selecionadas. 

5 


Clicar em Salvar para exportar a fatia na mesma pasta da fatia original usando o mesmo nome da 
base. 


6 Clicar em OK ao ser solicitado a substituir o arquivo existente. 


Quando se mantém o nome de arquivo original para a fatia atualizada e se carrega a fatia no 
mesmo local do site da Web de onde veio a imagem original, a nova fatia substitui a fatia 
original na imagem. 


Nota: Evitar o redimensionamento da fatia além de seu tamanho de exportação original no Fireworks para evitar 
resultados inesperados no documento HTML ao atualizar a fatia. 


Exportação de uma animação 


Depois de criar e otimizar uma animação, ela está pronta para ser exportada. É possível exportar 
uma animação como um GIF animado, um arquivo SWF Flash ou como múltiplos arquivos. 


Se o documento contiver mais de uma animação, será possível inserir fatias no topo de cada 
animação para exportar cada uma delas usando configurações de animação diferentes, como ciclo 
e retardo de moldura. 


Para mais informações sobre exportação de animações como arquivos SWF Flash, consultar “Como 
trabalhar com o Macromedia Flash MX?” na página 377. Para mais informações sobre exportação 
para múltiplos arquivos, consultar “Exportação de uma moldura ou camada” na página 351. 

Para exportar uma animação como um GIF animado: 


1 Selecionar Editar > Cancelar seleção para cancelar a seleção de todas as fatias e objetos, e, no 
painel Otimizar, selecionar GIF animado como o formato de arquivo. 


Para mais informações sobre otimização, consultar “Otimização de GIF, PNG, TIFE BMP e 
PICT” na página 334. 


2 Selecionar Arquivo > Exportar. 
3 Na caixa de diálogo Exportar, digitar um nome para o arquivo e selecionar o destino. 


4 Clicar em Salvar. 
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Para exportar múltiplas animações com configurações de animação diferentes como GIFs animados: 


1 
2 


Pressionar a tecla Shift e clicar nas animações para selecionar todas elas. 

Escolher Editar > Inserir > Fatia. 

Aparece uma caixa de mensagem solicitando confirmar se inserir uma fatia ou múltiplas fatias. 
Clicar em Múltiplos. 


Selecionar cada fatia individualmente e usar o painel Molduras para definir configurações de 
animação diferentes para cada uma. Para mais informações sobre configurações de animação, 
consultar Capítulo 14, “Criação de animação”, na página 309. 


Selecionar Editar > Cancelar seleção para cancelar a seleção de todas as fatias e objetos, e, no 
painel Otimizar, selecionar GIF animado como o formato de arquivo. 


Para mais informações sobre otimização, consultar “Otimização de GIF, PNG, TIFE BMP e 
PICT” na página 334. 


Clicar com o botão direito do mouse (Windows) ou pressionar Control e clicar (Macintosh) na 
tabela desejada e selecionar Exportar fatia selecionada no menu de contexto para exportar cada 
fatia individualmente. Na caixa de diálogo Exportar, digitar um nome para cada arquivo, 
selecionar o destino e clicar em Salvar. 


Exportação de uma moldura ou camada 


O Fireworks pode exportar cada camada ou moldura em um documento como um arquivo de 
imagem separado com o uso das configurações de otimização especificadas no painel Otimizar. O 
nome da camada ou moldura determina o nome de cada arquivo exportado. Este método de 
exportação é usado algumas vezes para exportar animações. 


Para exportar molduras ou camadas como múltiplos arquivos: 


1 
2 


5 


Selecionar Arquivo > Exportar. 

Digitar um nome de arquivo e selecionar uma pasta de destino. 

No menu pop-up Salvar como tipo, selecionar o seguinte: 

Para exportar molduras como múltiplos arquivos, selecionar Molduras para arquivos. 
Para exportar camadas como múltiplos arquivos, selecionar Camadas para arquivos. 
Nota: Isso exporta todas as camadas da moldura atual. 


Selecionar Aparar imagens para recortar automaticamente as imagens exportadas para adequá-las 
aos objetos em cada moldura. 


Se desejar exportar molduras ou camadas com o mesmo tamanho do documento, cancelar a 
seleção de Aparar imagens. 


Clicar em Salvar. 


Exportação de uma área 


É possível usar a ferramenta Área de exportação para exportar uma parte de um documento do 
Fireworks. 


Para exportar uma parte de um documento: 


1 


No painel Ferramentas, selecionar a ferramenta Área de exportação. 
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2 Arrastar uma moldura da caixa de seleção para definir a parte do documento que se deseja exportar. 
Nota: É possível ajustar a posição da moldura à medida que se arrasta. Pressionado o botão do mouse, manter 
pressionada a barra de espaço no teclado e arrastar a moldura para outro local da tela. Soltar a barra de espaço 
para continuar o desenho da moldura. 

Ao soltar o botão do mouse, a área de exportação permanece selecionada. 

3 Como redimensionar a área de exportação, se necessário: 


è Pressionar a tecla Shift e arrastar uma alça para redimensionar proporcionalmente a moldura da 
área de exportação. 


è Pressionar a tecla Alt e arrastar (Windows) ou pressionar a tecla Opção e arrastar (Macintosh) 
uma alça para redimensionar a moldura a partir do centro. 


è Pressionar as teclas Alt + Shift e arrastar (Windows) ou pressionar as teclas Opção + Shift e 
arrastar (Macintosh) uma alça para limitar as proporções e redimensionar a partir do centro. 


4 Clicar duas vezes dentro da moldura da caixa de seleção da área de exportação para ir para 
Visualizar exportação. 


5 Ajustar as configurações em Visualizar exportação e clicar em Exportar. 


6 Na caixa de diálogo Exportar, digitar um nome para o arquivo e selecionar uma pasta de 
destino. 


7 No menu pop-up Salvar como, selecionar Somente imagens. 
8 Clicar em Salvar. 


Nota: Para cancelar sem exportar, clicar duas vezes fora da moldura da caixa de seleção da área de exportação, 
pressionar Esc ou selecionar outra ferramenta. 


Exportação de HTML 


A menos que especificado de outra forma, ao exportar um documento fatiado do Fireworks, o que 
se exporta na verdade é um arquivo HTML e uma série de imagens. 


O Fireworks gera HTML puro que pode ser lido pela maioria dos navegadores da Web e editores 
de HTML. Há uma série de meios para se exportar HTML do Fireworks: 


* Exportar um arquivo HTML que pode ser aberto posteriormente para edição em um editor de 
HTML. 


* Copiar o código HTML para a Área de transferência no Fireworks e, em seguida, colar aquele 
código diretamente em documento HT'ML existente. 


* Exportar um arquivo HTML, abri-lo em um editor de HT'ML, copiar manualmente seções do 
código do arquivo e colá-las em outro documento HTML. 


e Usar o comando Atualizar HTML para efetuar alterações em um arquivo HTML criado 
anteriormente. 


Nota: O Macromedia Dreamweaver e o Microsoft FrontPage compartilham uma integração estreita com o 
Fireworks. O Fireworks manuseia a exportação de HTML para aqueles aplicativos de maneira diferente do que 
fazem outros editores de HTML. Ao exportar HTML do Fireworks para um desses aplicativos, consultar Capítulo 16, 
“Uso do Fireworks com outros aplicativos”, na página 363. 


Também é possível exportar HTML como camadas CSS (Cascading Style Sheet, folha com estilo 
de cascata). O Fireworks suporta codificação UTF-8 e XHTML, para permitir a exportação de 
documentos também com o uso desses padrões. 
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Para definir a forma de exportação de HTML pelo Fireworks, é possível usar a caixa de diálogo 
Configuração do HT'ML. Essas configurações podem ser específicas do documento ou ser usadas 
como configurações padrão para todas as exportações de HTML do Fireworks. 


Sobre HTML 


O código HTML é gerado automaticamente pelo Fireworks ao exportar, copiar ou atualizar 
HTML. Não é necessário entendê-lo para utilizá-lo. Depois de gerado, não há necessidade de 
alterá-lo para fazê-lo funcionar, desde que os arquivos não sejam renomeados ou movidos. 


HTML (Hyper Text Markup Language, linguagem de marcação de hipertexto) é o padrão atual 
para a exibição de páginas da Web na Internet. Um arquivo HT'ML é um arquivo texto que 
contém estes elementos: 


* “Texto que aparece na página da Web 


* “Tags de HTML que definem a formatação e estrutura daquele texto e de todo o documento, 
bem como vínculos para imagens e outros documentos HTML (páginas da Web). 


As tags de HTML aparecem entre sinais de maior/menor e têm a seguinte aparência: 
<TAG> texto afetado </TAG> 


A tag de abertura indica ao navegador a formatação do texto que aparece em seguida ou a inclusão 
de um gráfico. A tag de fechamento (</TAG>), quando presente, indica o final daquela formatação. 


Inclusão de comentários em HTML 


O HTML do Fireworks é bem comentado, indicando o relacionamento das partes do código. Os 
comentários de HTML do Fireworks iniciam com <!-- e finalizam com -->. Tudo entre esses 
dois marcadores não é interpretado como códigos HTML ou JavaScript. Ao desejar incluir 
comentários em um HTML, é necessário indicar ao Fireworks a ativação dessa opção. 


Para incluir comentários em um HTML exportado: 


Antes da exportação, selecionar a opção Incluir comentários HT'ML na guia Geral da caixa de 
diálogo Configuração do HTML. 


Resultados de uma exportação 


Ao exportar ou copiar HTML do Fireworks, gera-se o seguinte para permitir a recriação da 
imagem do Fireworks em uma página da Web: 


e O código HTML necessário para reconstruir imagens fatiadas e qualquer código JavaScript, 
caso o documento contenha elementos interativos. O HTML do Fireworks contém vínculos 
com as imagens exportadas e define a cor do fundo da página da Web como a cor da tela. 


* Um ou mais arquivos de imagem, dependendo da quantidade de fatias no documento e da 
quantidade de estados incluídos nos botões. 


e Um arquivo chamado spacer.gif, se necessário. O arquivo spacer.gif é um GIF transparente de 1 
pixel por 1 pixel que o Fireworks usa para corrigir problemas de espaçamento ao reconstruir 
imagens fatiadas em uma tabela de HTML .É possível selecionar a exportação de um espaçador 
pelo Fireworks. Para mais informações, consultar “Configuração de opções de exportação de 


HTML” na página 359. 


* Se o documento do Fireworks contiver menus pop-up, um arquivo mm menu.js será criado, 
contendo o código necessário para a exibição de menus pop-up. 
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e Ao exportar ou copiar HTML para o Macromedia Dreamweaver, criam-se arquivos de notas 
para ajudar a ativar a integração estreita entre o Fireworks e o Dreamweaver. 


Exportação de HTML do Fireworks 


O Fireworks permite a exportação de HTML nos formatos Genérico, Dreamweaver, FrontPage e 
Adobe® GoLiveº?. O HTML genérico funciona com a maioria dos editores de HTML. A 
exportação de HTML do Fireworks gera um arquivo HTML e arquivos de imagem associados em 
um local especificado. 

Nota: O Fireworks também exporta HTML ao exportar para Macromedia Director e para camadas CSS. Para mais 


informações, consultar “Como trabalhar com o Macromedia Director” na página 386 e “Exportação de uma 
camada CSS” na página 358. 


O método de exportação de HTML do Fireworks para outros aplicativos é ideal ao se trabalhar 
em um ambiente de equipe de trabalho. A exportação de um arquivo HTML segmenta o fluxo de 


trabalho, permitindo que uma pessoa execute uma tarefa em um aplicativo e outra possa 
continuar posteriormente usando outro aplicativo. 


É possível configurar preferências globais de exportação de HTML com o uso da caixa de diálogo 
Configuração do HT'ML. Para mais informações, consultar “Configuração de opções de 
exportação de HTML” na página 359. 


Nota: O Macromedia Dreamweaver e o Microsoft FrontPage compartilham uma integração estreita com o 
Fireworks. O Fireworks exporta HTML para esses aplicativos de maneira diferente do que fazem outros editores de 
HTML. Ao exportar HTML do Fireworks para um desses aplicativos, seguir estas instruções, mas consultar 
também Capítulo 16, “Uso do Fireworks com outros aplicativos”, na página 363 para obter notas adicionais 
específicas dos aplicativos. 

Para exportar HTML do Fireworks: 

1 Executar um dos seguintes procedimentos para abrir a caixa de diálogo Exportar: 

* Selecionar Arquivo > Exportar. 


e No canto superior direito da janela do documento, clicar no botão Exportação rápida e 
selecionar uma opção de exportação no menu pop-up do aplicativo de destino. O Fireworks 
preenche automaticamente as caixas de texto da caixa de diálogo Exportar com as 
configurações apropriadas para o aplicativo selecionado. 


Nota: Aplicativos de terceiros são encontrados no submenu Exportação rápida > Outro. 
2 Navegar até a pasta desejada do site no disco rígido. 
3 No menu pop-up Salvar como tipo, selecionar HTML e imagens. 


4 Na caixa de diálogo Configuração do HTML, guia Geral, menu pop-up Estilo do HTML, clicar 

no botão Opções e selecionar o editor de HTML. Se o editor de HTML desejado não estiver na 
lista, selecionar Genérico. 
Nota: É importante selecionar um editor de HTML como o estilo de HTML; caso isto não ocorra, elementos 
interativos, como botões e rollovers, poderão não funcionar corretamente ao serem importados no editor de 
HTML desejado. 

5 Clicar em OK para retornar à caixa de diálogo Exportar. 


6 Digitar um nome de arquivo nas caixas Nome do arquivo (Windows) ou Salvar como (Macintosh). 
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7 Selecionar Exportar arquivo HTML no menu pop-up HTML. 


A seleção de Exportar arquivo HTML gera um arquivo HT'ML e os arquivos de imagem 
associados no local especificado. 


8 No menu pop-up Fatias, selecionar Exportar fatias, caso o documento contenha fatias. 


9 Selecionar Colocar imagens na subpasta caso se deseje armazenar as imagens em uma pasta 
separada. É possível selecionar uma pasta específica ou usar uma pasta padrão do Fireworks, 
chamada “images”. 


10 Clicar em Salvar. 


Depois da exportação, os arquivos exportados do Fireworks aparecerão no disco rígido. As 
imagens e um arquivo HTML são gerados no local especificado na caixa de diálogo Exportar. 


Como copiar um HTML para a Área de transferência 


Uma maneira rápida de se exportar um HTML gerado pelo Fireworks é copiando-o para a Área 
de transferência. 


É possível efetuar a cópia de um código HTML no Fireworks de duas formas. Usando o comando 
Copiar código HT'ML ou selecionando Copiar para a área de transferência como opção na caixa 
de diálogo Exportar. Assim, copia-seo HTML do Fireworks para a Área de transferência e geram- 
se os arquivos de imagem associados no local especificado. Posteriormente, será possível colar esse 
HTML em um documento no editor de HTML preferido. 


Embora a cópia para a Área de transferência seja uma maneira rápida de colocar HTML do 
Fireworks em outros aplicativos, não é a maneira ideal para todas as situações. A cópia de HTML 
para a Área de transferência apresenta as seguintes desvantagens: 


e Não há a opção de salvar imagens em uma subpasta. Elas devem residir na mesma pasta do 
arquivo HTML em que se cola o HTML copiado. Uma exceção é o HTML copiado para o 
Macromedia Dreamweaver. 


* “Todos os vínculos ou caminhos usados nos menus pop-up do Fireworks serão mapeados para o 
disco rígido. O HTML copiado para o Dreamweaver é uma exceção. 


* Ao usar um editor de HTML diferente do Dreamweaver ou Microsoft FrontPage, o código 
JavaScript associado a botões, comportamentos e imagens de rollover será copiado, mas poderá 
não funcionar corretamente. 


Se esses itens representarem um problema, será preferível usar a opção Exportar arquivo HTML 
em vez de copiar o HTML para a Área de transferência. 


Nota: Antes de copiar o código HTML, certificar-se de selecionar o estilo de HTML apropriado e a opção Incluir 
comentários HTML na guia Geral da caixa de diálogo Configuração do HTML. Para mais informações, consultar 
“Configuração de opções de exportação de HTML” na página 359. 


Para copiar HTML do Fireworks com o uso da opção Copiar código HTML: 

1 Seguir uma das seguintes opções: 

* Selecionar Editar > Copiar código HTML. 

e Clicar no botão Exportação rápida e, no menu pop-up, selecionar Copiar código HTML. 


2 Seguir a orientação do assistente durante a configuração da exportação do código HT'ML e das 
imagens. Ao ser solicitado, especificar uma pasta desejada como o destino para as imagens 
exportadas. Esse deve ser o local em que o arquivo HTML residirá. 
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Nota: Se o código HTML for colado no Macromedia Dreamweaver, não importará a localização das imagens 
exportadas, porque elas residirão no mesmo site do Dreamweaver, bem como o arquivo HTML no qual o código 
será colado. 


O assistente exporta as imagens para o destino especificado e copia o código HTML para a 
Área de transferência. 


Para copiar HTML do Fireworks com o uso da caixa de diálogo Exportar: 


1 


O q Aà O 


7 


Selecionar Arquivo > Exportar. 


Nota: Opcionalmente, ao exportar para o Dreamweaver, clicar no botão Exportação rápida e selecionar Copiar 
HTML para Área de transferência no submenu Dreamweaver. 


Na caixa de diálogo Exportar, especificar uma pasta de destino para as imagens exportadas. Esta 
deverá ser o mesmo local em que o arquivo HTML residirá. 


Nota: Se o código HTML for colado no Macromedia Dreamweaver, não importará a localização das imagens 
exportadas, porque elas residirão no mesmo site do Dreamweaver, bem como o arquivo HTML no qual o código 
será colado. 

No menu pop-up Salvar como tipo, selecionar HTML e imagens. 

No menu pop-up HTML, selecionar Copiar para a área de transferência. 


Se o documento contiver fatias, selecionar Exportar fatias no menu pop-up Fatias. 


Clicar no botão Opções, selecionar o editor de HTML desejado na caixa de diálogo 
Configuração do HTML e clicar em OK. 


Na caixa de diálogo Exportar, clicar em Salvar. 


Para colar um HTML copiado do Fireworks em um documento HTML: 


1 


No editor de HTML, abrir um documento HTML existente ou criar um novo documento. 
Salvar o documento no mesmo local das imagens exportadas. 
Nota: Ao usar o Macromedia Dreamweaver, não é necessário salvar o arquivo HTML no mesmo local das imagens 


exportadas. Ao exportar imagens do Fireworks para um site do Dreamweaver e salvar o arquivo HTML em algum 
local dentro daquele site, o Dreamweaver resolve automaticamente os caminhos até as imagens associadas. 


Exibir o código HTML e colocar o ponto de inserção no local desejado entre as tags <BODY>. 


Nota: O código HTML copiado do Fireworks não inclui as tags de abertura e fechamento <HTML> e <BODY>. 


Colar o código HTML. Consultar o sistema de ajuda do editor de HTML para obter 
instruções sobre como colar conteúdo da Área de transferência. 


Ao colar o código em editores de HTML, é importante manter os arquivos de imagens e HTML 
no local correto, pois, do contrário, os vínculos poderão ser desfeitos. Se possível, ao copiar para 
a Área de transferência, certificar-se de que as imagens sejam exportadas para o local definitivo 
em que residirão no site da Web. O Fireworks usa URLs relativos de documentos, de forma que 
seo HTML ou as imagens forem movidos, os vínculos URL serão desfeitos. 


Como copiar e colar HTML de um arquivo do Fireworks exportado 


É possível abrir HTML do Fireworks exportado em um editor de HTML e copiar e colar seções 
do código em outro arquivo HTML. 


Para copiar o código de um arquivo do Fireworks exportado e colá-lo em outro documento HTML: 


1 


Abrir o arquivo HTML do Fireworks exportado em um editor de HTML. 
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Realçar o código necessário e copiá-lo para a Área de transferência. 
3 Abrir um documento HTML existente ou criar um novo documento. 


Colar o código da Área de transferência no local desejado dentro do novo arquivo HTML. Não 
será necessário copiar as tags <HTML> e <BODY>, porque as mesmas deverão já estar incluídas no 
documento HTML de destino. 


Ao selecionar Incluir comentários HTML na caixa de diálogo Configuração do HTML do 
Fireworks, seguir as instruções dos comentários para copiar e colar o código no local 
apropriado. 

5 Se o documento do Fireworks contiver elementos interativos, será necessário copiar também o 
código JavaScript. 


O código JavaScript é circundado por tags <SCRIPT> e localiza-se na seção <HEAD> do 
documento. Copiar e colar a seção <SCRIPT)> inteira, a menos que o documento de destino já 
tenha uma seção <SCRIPT>. Neste caso, será necessário copiar e colar somente o conteúdo da 
seção <SCRIPT> na seção <SCRIPT> existente, tomando cuidado para não sobrescrever o 
conteúdo da seção existente. Certificar-se também de não duplicar as funções JavaScript na 
seção <SCRIPT> depois de copiar o código. 


Atualização de um HTML exportado 


O comando Atualizar HTML permite efetuar alterações em um documento HTML do Fireworks 
exportado anteriormente. Este recurso é útil quando se deseja atualizar somente uma parte de um 
documento. 


Nota: Atualizar HTML funciona de forma diferente com documentos HTML do Macromedia Dreamweaver. Para 
mais informações, consultar “Como trabalhar com o Macromedia Dreamweaver MX” na página 363. 


Ao atualizar um HTML do Fireworks, é possível selecionar entre substituir somente as imagens 
alteradas ou sobrescrever todos os códigos e imagens. Ao selecionar a substituição somente das 
imagens alteradas, todas as alterações efetuadas no arquivo HTML fora do Fireworks serão 
preservadas. 


Nota: Para alterações consideráveis no layout de um documento, efetuar as alterações no Fireworks e exportar 
novamente o arquivo HTML. 

Para atualizar o HTML com o uso do comando Atualizar HTML: 

1 Seguir uma das seguintes opções: 

è Selecionar Arquivo > Atualizar HTML. 

e Clicar no botão Exportação rápida e selecionar Atualizar HTML no menu pop-up. 
Selecionar o arquivo a ser atualizado na caixa de diálogo Localizar arquivo HTML. 

Clicar em Abrir. 


Se não for encontrado o HTML gerado pelo Fireworks, clicar em OK para inserir o novo 
HTML no final do documento. 


5 Se não for encontrado o HTML gerado pelo Fireworks, selecionar uma das opções seguintes e 
clicar em OK: 


Aa O N 


Substituir imagens e seus HTML substitui o HTML anterior. 
Atualizar apenas imagens substitui somente as imagens. 


6 Se aparecer a caixa de diálogo Selecionar pasta de imagens, selecionar uma pasta e clicar em Abrir. 
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Exportação de uma camada CSS 


O recurso CSS (Cascading Style Sheets, folhas de estilo em cascata) proporciona maior controle 
sobre a forma de exibição de páginas da Web. As camadas CSS permitem criar folhas de estilo ou 
modelos que definem a aparência de elementos diferentes, como cabeçalhos e vínculos. Com o 
CSS é possível controlar simultaneamente o estilo e layout de múltiplas páginas da Web. As 
camadas CSS podem sobrepor-se e ser empilhadas uma em cima da outra. No Fireworks, a saída 
HTML normal não empilha. 


Para exportar um gráfico em camadas CSS: 


1 Selecionar Arquivo > Exportar. 


2 Na caixa de diálogo Exportar, digitar um nome para o arquivo e selecionar uma pasta de 
destino. 


3 No menu pop-up Salvar como tipo, selecionar Camadas CSS. 

4 No menu pop-up Origem, selecionar uma das seguintes opções: 

* Camadas do Fireworks exporta todas as camadas como camadas CSS. 

* Molduras do Fireworks exporta todas as molduras como camadas CSS. 
e Fatias do Fireworks exporta as fatias no documento como camadas CSS. 


5 Selecionar Aparar imagens para recortar automaticamente as imagens e camadas exportadas 
para que se ajustem aos objetos. 


6 Selecionar Colocar imagens na subpasta para escolher uma pasta para as imagens. 


7 Clicar em Salvar. 


Exportação de XHTML 


Em um futuro breve, espera-se que o XHTML substitua o HTML como o padrão para a exibição 
de conteúdo para a Web. O XHTML não é apenas compatível retroativamente, o que significa 
que a maioria dos navegadores da Web atuais podem exibi-lo, mas também pode ser lido por 
qualquer dispositivo que exiba conteúdo XML, como PDAs, telefones celulares e outros 
dispositivos portáteis. 


O XHTML é uma combinação de HT'ML, o padrão atual de formatação e exibição de páginas da 
Web, e XML (eXtensible Markup Language, linguagem de marcação extensível). O XHTML 
contém os elementos do HTML e, ao mesmo tempo, obedece às regras de sintaxe mais restritas do 
XML. 


Para suportar esse novo padrão, o Fireworks permite exportar XHTML. 


Nota: O Fireworks também pode importar XHTML. Para mais informações, consultar “Criação de arquivo PNG do 
Fireworks a partir de arquivos HTML” na página 78. 


Para mais informações sobre XHTML, visite a especificação de XHTML do World Wide Web 
Consortium (W3C) em http://www.w3.org. 
Para exportar XHTML no Fireworks: 


1 Selecionar Arquivo > Configuração do HTML, selecionar um estilo de XHTML no menu 
pop-up Estilo do HTML na guia Geral e clicar em OK. 
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2 Exportar o documento com o uso de um dos métodos disponíveis para exportação ou cópia de 
HTML. Para mais informações sobre as várias formas de se exportar e copiar HTML no 
Fireworks, consultar “Exportação de HTML” na página 352. 


Nota: O Fireworks usa codificação UTF-8 ao exportar para XHTML. Para mais informações sobre codificação 
UTF-8, consultar “Exportação de um arquivo com codificação UTF-8” na página 359. 


Exportação de um arquivo com codificação UTF-8 


Historicamente, os navegadores da Web não eram capazes de exibir conjuntos de caracteres 
diferentes dentro de um único documento HTML. Por exemplo, textos em chinês e textos em 
inglês não podiam ser exibidos na mesma página porque os navegadores da Web não eram capazes 
de exibir conjuntos de caracteres diferentes em um único documento. 


O UTE-8 (Universal Character Set Transformation Format-8, transformação de conjunto de 
caracteres universal formato 8) é um método de codificação de texto que permite aos navegadores 
da Web exibir conjuntos de caracteres diferentes na mesma página HTML. O Fireworks permite 
exportar HTML com codificação UTF-8. 


Nota: O Fireworks também pode importar documentos que usam codificação UTF-8. Para mais informações, 
consultar “Criação de arquivo PNG do Fireworks a partir de arquivos HTML” na página 78. 


Para exportar documentos com codificação UTF-8: 


1 Selecionar Arquivo > Configuração do HTML, selecionar Usar codificação UTF-8 na guia 
Específico do documento e clicar em OK. 


Nota: Para mais informações sobre opções de configuração de HTML, consultar “Configuração de opções de 
exportação de HTML” na página 359. 


2 Exportar o documento com o uso de um dos métodos disponíveis para exportação ou cópia de 
HTML. Para mais informações sobre as várias formas de se exportar e copiar HTML no 
Fireworks, consultar “Exportação de HTML” na página 352. 


Configuração de opções de exportação de HTML 


A caixa de diálogo Configuração do HTML permite definir como o Fireworks exporta HTML. 
Essas configurações podem ser específicas do documento ou podem ser usadas como configurações 
padrão para todas as exportações de HTML. As alterações efetuadas na guia Específico do 
documento afetam somente o documento atual, mas essas configurações poderão ser usadas como 
padrão para novos documentos ao clicar no botão Definir padrões antes de fechar a caixa de diálogo 
Configuração do HTML. As configurações Geral e Tabela são preferências globais e afetam todos os 
novos documentos. 


Para definir como o Fireworks exporta HTML: 

1 Selecionar Arquivo > Configuração do HTML ou, na caixa de diálogo Exportar, clicar no 
botão Opções. 

2 Na guia Geral, selecionar uma das seguintes opções: 


* Selecionar um Estilo do HTML para definir o estilo do HTML exportado. 


HTML genérico funciona em qualquer editor de HT'ML. Porém, se o documento contiver 
comportamentos ou outro conteúdo interativo, selecionar um editor específico caso o mesmo 
apareça na lista. Elementos interativos são exportados de maneira diferente no Fireworks, 
dependendo do estilo de HTML selecionado. 
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Para exportar um documento com o uso do padrão XHTML, selecionar o estilo XHTML 
apropriado no menu pop-up. Para mais informações sobre XHTML, consultar “Exportação de 


XHTML” na página 358. 
* Selecionar um nome de extensão de arquivo no menu pop-up Extensão ou digitar um novo. 


* Selecionar Incluir comentários HTML para incluir comentários relativos ao local em que copiar e 
colar o HTML. Esta opção é recomendável caso o documento contenha elementos interativos, 
como botões, comportamentos ou imagens de rollover. Os comentários do HTML ajudam a 
determinar quais partes do código copiar e colar. 


* Selecionar Nome de arquivo em minúsculas para criar o nome do arquivo HTML e os arquivos 
de imagem associados em minúsculas na exportação. 


Nota: Isto não colocará a extensão do arquivo HTML em minúsculas caso uma extensão em maiúsculas seja 
selecionada no menu pop-up Extensão. 


* Selecionar um aplicativo associado no menu pop-up Criador de arquivos (Macintosh). Ao 
clicar duas vezes no arquivo HTML exportado no disco rígido, o aplicativo especificado se abre 
automaticamente. 


3 Na guia Tabela, selecionar as configurações para as tabelas de HTML. Para mais informações 
sobre como definir propriedades para tabelas de HTML exportadas do Fireworks, consultar 
“Definição da forma de exportação das tabelas HTML” na página 280. 


4 Na guia Específico do documento, selecionar uma das seguintes opções: 


e Selecionar uma fórmula para modo de nomeação automática de fatias nos menus pop-up 
Nomeação automática de fatias. É possível usar as configurações padrão ou selecionar opções 
personalizadas. 


Nota: Tomar cuidado ao selecionar Nenhum como uma opção de menu para a nomeação automática de fatias. 
Se Nenhum for selecionado como a opção para os três primeiros menus, o Fireworks exportará os arquivos de 

fatia que se sobregravam entre si, resultando em um único gráfico exportado e uma tabela que exibe esse gráfico 
em todas as células. 


e Digitar o texto na caixa de texto Descrição de imagem alternativa. Este texto alternativo 
aparece no lugar de todas as imagens enquanto são descarregadas da Web e no lugar das 
mensagens com falha de download. Em alguns navegadores, elas também podem aparecer 
como uma dica quando o ponteiro passa sobre a imagem. Também usado para usuários da Web 
com deficiência visual. 


è Selecionar Múltiplas barras de navegação e páginas HTML ao exportar uma barra de 
navegação que se vinculará a várias páginas. Ao selecionar esta opção, o Fireworks exporta 
páginas adicionais para cada botão na barra de navegação. 


* Selecionar Codificação UTF-8 se o documento exibir caracteres de múltiplos conjuntos de 
caractere. Para mais informações sobre codificação UTF-8, consultar “Exportação de um arquivo 
com codificação UTF-8” na página 359. 


5 Clicar em Definir padrões para salvar as configurações como configurações globais padrão. 


6 Clicar em OK. 
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Como usar o botão Exportação rápida 


O botão Exportação rápida, localizado no canto superior direito da janela do documento, oferece 
acesso fácil às opções comuns de exportação de arquivos do Fireworks para outros aplicativos. 
Com o uso do botão Exportação rápida, é possível exportar para vários formatos, incluindo 
aplicativos Macromedia e outros aplicativos, como o Microsoft FrontPage e Adobe? GoLiveº. 


is 


d) Dreamweaver > 
[1] Macromedia Flash > 
È FreeHand > 
O Director » 
@ Visualizar no navegador > 

Dutro > 


Copiar código HTML... 
Atualizar HTML... 


Todas as opções de exportação disponíveis através do botão Exportação rápida também são 
acessíveis em outras partes do Fireworks, como na caixa de diálogo Exportar e no menu Editar. O 
botão Exportação rápida oferece um atalho para a maioria das opções de exportação comuns. Para 
mais informações sobre como exportar cada formato, consultar “Uso do Fireworks com outros 
aplicativos” na página 363. 


Para a maioria dos formatos, estão disponíveis vários métodos de exportação. Por exemplo, é 
possível exportar HTML do Dreamweaver ou atualizar um HT'ML existente do Dreamweaver. 
Ou é possível copiar o HTML do Dreamweaver para a Área de transferência. É possível exportar 
um arquivo SWF do Flash ou copiar objetos selecionados como vetores. 


O botão Exportação rápida também pode ser usado para iniciar outros aplicativos, bem como 
visualizar documentos do Fireworks em um navegador específico. Através da simplificação do 
processo de exportação, o botão Exportação rápida economiza tempo e melhora o fluxo de 


trabalho de design. 


Nota: O botão Exportação rápida exporta gráficos e fatias com o uso das configurações especificadas no painel 
Otimizar; dessa forma, certificar-se de otimizar o gráfico antes de exportá-lo com o botão Exportação rápida. Para 
mais informações sobre otimização, consultar “Sobre otimização” na página 325. 


Para exportar um documento ou gráfico selecionado do Fireworks com o uso do botão 
Exportação rápida: 


1 Clicar no botão Exportação rápida e selecionar uma opção de exportação no menu pop-up 
exibido. 


As opções apropriadas serão definidas automaticamente na caixa de diálogo Exportar. Alterar as 
opções, caso desejado. 


2 Selecionar uma localização na qual armazenar os arquivos exportados, digitar um nome de 
arquivo e clicar em Salvar. 
Para iniciar outro aplicativo Macromedia com o uso do botão Exportação rápida: 


Clicar no botão Exportação rápida e, no submenu do aplicativo, selecionar a opção Iniciar. 
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Como personalizar o menu pop-up Exportação rápida 
Desde que o usuário conheça JavaScript e XML, é possível adicionar opções ao menu pop-up 
Exportação rápida. 
Para adicionar opções ao menu pop-up Exportação rápida: 
1 Criar arquivos JSF personalizados e arrastá-los na pasta Quick Export Menu do disco rígido. 


Nota: A localização exata dessa pasta varia em função do sistema operacional. Para mais informações, 
consultar “Como trabalhar com arquivos de configuração” na página 427. 


2 Editar o arquivo Quick Export Menu.xml incluindo as referências aos novos arquivos JSF. 


Ao iniciar o Fireworks novamente, as novas opções criadas serão adicionadas ao menu pop-up 
Exportação rápida. Para mais informações, consultar Extending Fireworks MX, disponível, no 
formato PDF, no CD de instalação do Macromedia Fireworks MX. 
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CAPÍTULO 16 
Uso do Fireworks com outros aplicativos 


Na criação de multimídia ou conteúdo para a Web, o Macromedia Fireworks MX representa um 
componente essencial da caixa de ferramentas de qualquer designer. Ele se integra perfeitamente 
com outros aplicativos, oferecendo vários recursos de integração que simplificam o processo de 
criação. 


É possível exportar gráficos do Fireworks para diversos aplicativos, inclusive para outros produtos 
da Macromedia. Quando utilizado em conjunto com outros aplicativos da Macromedia, o 
Fireworks oferece recursos de integração sofisticados: 


e O Fireworks pode ser iniciado para editar gráficos selecionados a partir de vários aplicativos da 
Macromedia, como Dreamweaver, Flash, HomeSite, FreeHand e Director. 


* Os comportamentos do Fireworks são preservados após a exportação para vários aplicativos da 
Macromedia, o que permite exportar elementos interativos, como botões e rollovers. 


* O Dreamweaver e o Fireworks compartilham uma integração física conhecida como Roundtrip 
HTML, que permite efetuar alterações em um aplicativo e fazer com que elas se reflitam 
integralmente no outro. 


* O Flash e o Fireworks também compartilham uma integração física. É possível importar 
arquivos PNG de origem do Fireworks diretamente para o Flash, sem necessitar exportá-los 
para qualquer outro formato gráfico. O Flash oferece várias opções que possibilitam o controle 
da importação de objetos e camadas do Fireworks. 


O Fireworks também simplifica a tarefa de trabalhar com aplicativos que não sejam da 
Macromedia. É simples iniciar e editar tabelas e gráficos do Fireworks a partir do Microsoft 
FrontPage, por exemplo, ou importar e exportar gráficos do Photoshop como arquivos totalmente 
editáveis. 


Como trabalhar com o Macromedia Dreamweaver MX 


Recursos exclusivos de integração tornam fácil trabalhar em arquivos no Macromedia 
Dreamweaver e no Macromedia Fireworks de maneira intercambiável. O Dreamweaver e o 
Fireworks reconhecem e compartilham muitas das edições de arquivo, incluindo alterações em 
vínculos, mapas de imagens, fatias de tabelas e muito mais. Juntos, os dois aplicativos 
proporcionam um fluxo de trabalho simplificado para edição, otimização e colocação de arquivos 
gráficos da Web em páginas HTML. 
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Se o usuário desejar modificar imagens e tabelas do Fireworks colocadas em um documento do 
Dreamweaver, bastará iniciar o Fireworks para fazer as edições e, em seguida, retornar ao 
documento atualizado no Dreamweaver. Para fazer edições rápidas de otimização em imagens e 
animações colocadas no Fireworks, bastará abrir a caixa de diálogo Visualizar exportação do 
Fireworks e inserir as configurações atualizadas. Em ambos os casos, as atualizações serão feitas 
nos arquivos colocados no Dreamweaver, assim como nos arquivos de origem do Fireworks, se 
esses arquivos tiverem sido abertos. 


A criação de marcadores de lugar de imagem no Dreamweaver para futuras imagens do Fireworks 
simplifica ainda mais o fluxo do trabalho de criação para a Web. Posteriormente, bastará 
selecionar esses marcadores de lugar e iniciar o Fireworks para criar os gráficos desejados nas 
dimensões especificadas pelas imagens dos marcadores de lugar do Dreamweaver. O Fireworks 
oferece a opção de alterar as dimensões da imagem, se isso for desejado. 


Colocação de uma imagem do Fireworks em um arquivo do Dreamweaver 


Há duas maneiras de se colocar gráficos do Fireworks em um documento do Dreamweaver: colocar 
um gráfico concluído do Fireworks com o uso do menu Inserir do Dreamweaver ou criar um novo 
documento do Fireworks com base em um marcador de lugar de imagem do Dreamweaver. 


Inserção de uma imagem do Fireworks no Dreamweaver 


É possível inserir imagens GIF ou JPEG geradas pelo Fireworks diretamente em um documento 
do Dreamweaver. Mas primeiro é necessário exportar as imagens do Fireworks. Para mais 
informações sobre como exportar imagens GIF e JPEG, consultar “Exportação de uma imagem 
simples” na página 348. 


Para inserir uma imagem do Fireworks em um documento do Dreamweaver: 


1 Posicionar o ponto de inserção no local em que se deseja que a imagem apareça na janela do 
documento do Dreamweaver. 


2 Seguir um dos seguintes procedimentos: 

è Escolher Inserir > Imagem. 

e Na categoria Comum do painel Objetos, clicar no botão Inserir imagem. 
3 Navegar até a imagem exportada do Fireworks e clicar em Abrir. 


Se o arquivo de imagem não estiver no site atual do Dreamweaver, aparecerá uma mensagem 
perguntando se o usuário deseja copiar o arquivo para a pasta do site. 


Criação de um novo arquivo do Fireworks com base em um marcador de 
lugar do Dreamweaver 


Os marcadores de lugar de imagem combinam a eficiência do Fireworks e do Dreamweaver, o que 
permite testar vários layouts de página da Web antes de se criar a arte final da página. Esses marcadores 
permitem especificar o tamanho e a posição de futuras imagens do Fireworks a serem colocadas 

no Dreamweaver. 


O processo de criação de uma imagem do Fireworks com base em um marcador de lugar de 
imagem do Dreamweaver cria um novo documento do Fireworks cuja tela tem as mesmas 
dimensões do marcador de lugar selecionado. No Fireworks, é possível utilizar qualquer uma de 
suas ferramentas para criar gráficos. É até mesmo possível fatiar o documento e adicionar 
interatividade com o uso de botões, rollovers e outros comportamentos. 
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Nota: Todos os comportamentos aplicados no Fireworks são preservados após a exportação para o Dreamweaver. 
Da mesma forma, a maioria dos comportamentos do Dreamweaver aplicados a marcadores de lugar de imagem 
também são preservados quando iniciados e editados com o Fireworks. Entretanto, há uma exceção: rollovers 
desmembrados aplicados a marcadores de lugar de imagem no Dreamweaver não são preservados quando 
iniciados e editados no Fireworks. 


Uma vez que a sessão do Fireworks tenha terminado e o usuário tenha retornado ao Dreamweaver, 
o novo gráfico do Fireworks que ele criou substituirá o marcador de lugar de imagem 
originalmente selecionado. 


Para criar uma imagem do Fireworks com base em um marcador de lugar de imagem no 
Dreamweaver: 


1 


No Dreamweaver, salvar o documento HTML desejado em um local dentro da pasta do site do 
Dreamweaver. 


Posicionar o ponto de inserção na posição desejada no documento e escolher Inserir > 
Marcador de lugar de imagem. 


Um marcador de lugar de imagem é inserido no documento do Dreamweaver. 


imagel (159 x31) d 


Seguir um dos seguintes procedimentos: 


Selecionar o marcador de lugar de imagem e clicar em Criar no Inspetor de propriedades. 


Manter pressionada a tecla Control (Windows) ou Command (Macintosh) e clicar duas vezes 
no marcador de lugar de imagem. 


Clicar com o botão direito do mouse (Windows) ou manter pressionada a tecla Control 
(Macintosh) e clicar, e escolher Criar imagem no Fireworks. 


O Dreamweaver iniciará o Fireworks caso ainda não esteja aberto. A janela do documento 
indica que o usuário está editando uma imagem no Dreamweaver. 


D] image1 @ 100%" 
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Criar uma imagem no Fireworks e clicar em Concluído ao terminar. 


Na caixa de diálogo Salvar como, especificar um nome e local para o arquivo PNG de origem e 
clicar em Salvar. 


Nota: O nome inserido para o marcador de lugar de imagem no Inspetor de propriedades do Dreamweaver será 
o nome de arquivo padrão no Fireworks. 


Para mais informações sobre como salvar arquivos PNG do Fireworks, consultar “Salva de um 
arquivo do Fireworks” na página 82. 
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6 Na caixa de diálogo Exportar, especificar um nome para o arquivo ou arquivos de imagem 
exportados. Esses são os JPEGs ou GIFs que serão exibidos no Dreamweaver. 


7 Especificar uma localização para o arquivo ou arquivos de imagem exportados. O local 
escolhido deve estar dentro da pasta do site do Dreamweaver. 


Para mais informações sobre exportação, consultar “Exportação do Fireworks” na página 347. 
8 Clicar em Salvar. 


Quando o usuário retornar ao Dreamweaver, a nova tabela ou imagem do Fireworks que ele 
criou substituirá o marcador de lugar de imagem que selecionou originalmente. 


A index.gif (Fireworks6/index. htm?) 


Colocação de HTML do Fireworks no Dreamweaver 


Há várias maneiras de se colocar HTML do Fireworks no Dreamweaver: exportar o HTML ou 
copiaro HTML do Fireworks para a Área de transferência. Uma outra possibilidade é abrir o 
arquivo HTML exportado do Fireworks no Dreamweaver e copiar e colar seções de código 
selecionadas. Com o comando Atualizar HTML do Fireworks, é simples atualizar o código 
exportado para o Dreamweaver. Existe até mesmo uma opção de exportação do HTML como um 
item de biblioteca do Dreamweaver. 


É possível exportar HTML do Fireworks como camadas CSS (Folha de estilos em cascata, 
Cascading Style Sheet). Para mais informações, consultar “Exportação de HTML” na página 352. 


Nota: Antes de exportar, copiar ou atualizar HTML do Fireworks para utilizar no Dreamweaver, certificar-se de 
escolher Dreamweaver como tipo de HTML na caixa de diálogo Configuração do HTML. Para mais informações, 
consultar “Configuração de opções de exportação de HTML” na página 359. 


Exportação de HTML do Fireworks para o Dreamweaver 


A exportação de arquivos do Fireworks para o Dreamweaver é um processo em duas etapas. A 
primeira etapa consiste em exportar arquivos do Fireworks diretamente para uma pasta do site do 
Dreamweaver. Isso gera um arquivo HTML e os arquivos de imagem associados no local 
especificado. A etapa seguinte consiste em colocar o código HTML no Dreamweaver com o uso 
do recurso Inserir. 


Nota: Antes de exportar, certificar-se de escolher Dreamweaver como o tipo de HTML na caixa de diálogo 
Configuração do HTML. Para mais informações, consultar “Configuração de opções de exportação de HTML” na 
página 359. 

Para exportar HTML do Fireworks: 

Exportar o documento para o formato HTML. Consultar “Exportação de HTML do Fireworks” 
na página 354. 

Para inserir HTML do Fireworks em um documento do Dreamweaver: 

1 No Dreamweaver, salvar o documento em um site definido. 


2 Posicionar o ponto de inserção no documento em que se deseja que o código HTML inserido 
comece. 
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3 Seguir um dos seguintes procedimentos: 
* Escolher Inserir > Imagens interativas > HTML do Fireworks. 
* Na categoria Comum do painel Objetos, clicar no botão Inserir HTML do Fireworks. 


4 Na caixa de diálogo que aparece, clicar em Procurar para escolher o arquivo HTML do 
Fireworks desejado. 


5 Escolher Excluir o arquivo após a inserção, para mover o arquivo HTML para a Lixeira 
(Windows) ou Lixo (Macintosh) quando a operação estiver concluída. 


Utilizar essa opção caso não seja mais necessário o arquivo HTML do Fireworks após sua 
inserção. Essa opção não afeta o arquivo PNG de origem associado ao arquivo HTML. 
Nota: Se o arquivo HTML estiver em uma unidade de rede, ele será permanentemente excluído, em vez de 
movido para o Lixo ou Lixeira. 


6 Clicar em OK para inserir o código HTML, junto com suas imagens, fatias e código JavaScript 
associados, no documento do Dreamweaver. 


Cópia de HTML do Fireworks para a Área de transferência para utilizar 
no Dreamweaver 


Uma maneira rápida de se colocar um HTML gerado pelo Fireworks no Dreamweaver é copiá-lo 
do Fireworks para a Área de transferência e colá-lo diretamente em um documento do 
Dreamweaver. Todo o código HTML e JavaScript associado ao documento do Fireworks é 
copiado para o documento do Dreamweaver, as imagens são exportadas para o local especificado e 
o Dreamweaver atualiza o HTML com vínculos, relativos ao site, com essas imagens. 


Nota: Antes de copiar para a Área de transferência, certificar-se de escolher Dreamweaver como o tipo de HTML 
na caixa de diálogo Configuração do HTML. Para mais informações, consultar “Configuração de opções de 
exportação de HTML” na página 359. 


Para copiar HTML do Fireworks para a Área de transferência para utilização no Dreamweaver: 


Copiar HTML para a Área de transferência no Fireworks e colá-lo em um documento do 
Dreamweaver. Consultar “Como copiar um HTML para a Área de transferência” na página 355. 


Como copiar código de um arquivo exportado do Fireworks e colá-lo no 
Dreamweaver 


É possível abrir um arquivo HTML exportado do Fireworks no Dreamweaver e copiar e colar 
manualmente apenas as seções desejadas em outro documento do Dreamweaver. 


Nota: Antes de exportar do Fireworks, certificar-se de escolher Dreamweaver como o tipo de HTML na caixa de diálogo 
Configuração do HTML. Para mais informações, consultar “Configuração de opções de exportação de HTML” na 
página 359. 


Para copiar código de um arquivo exportado do Fireworks e colá-lo no Dreamweaver: 


Exportar um arquivo HTML do Fireworks e copiar e colar o código em um documento existente 
do Dreamweaver. Consultar “Como copiar e colar HTML de um arquivo do Fireworks 
exportado” na página 356. 


Atualização do HTML do Fireworks exportado para o Dreamweaver 


O comando Atualizar HTML do Fireworks permite fazer alterações em um documento HTML 
exportado anteriormente para o Dreamweaver. 
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Nota: Embora Atualizar HTML seja um recurso útil para atualizar HTML exportado anteriormente para o 
Dreamweaver, o Roundtrip HTML oferece vantagens ainda maiores. Para mais informações, consultar “Edição de 
um arquivo do Fireworks no Dreamweaver” na página 369. 


Com o comando Atualizar HTML, é possível editar uma imagem PNG de origem no Fireworks 
e, em seguida, atualizar automaticamente qualquer código HT'ML exportado e os arquivos de 
imagem colocados em um documento do Dreamweaver. Esse comando permite atualizar arquivos 
do Dreamweaver mesmo quando o Dreamweaver não está sendo executado. 


Nota: Antes de atualizar HTML, certificar-se de escolher Dreamweaver como o tipo de HTML na caixa de diálogo 
Configuração do HTML. Para mais informações, consultar “Configuração de opções de exportação de HTML” na 
página 359. 


Para atualizar HTML do Fireworks no Dreamweaver: 
1 Fazer alterações no documento PNG desejado no Fireworks. 


2 Escolher Arquivo > Atualizar HTML ou clicar no botão Exportação rápida e escolher Atualizar 
HTML no menu pop-up do Dreamweaver. 


3 Navegar até o arquivo do Dreamweaver que contém o HTML que se deseja atualizar e clicar 
em Abrir. 


4 Navegar até a pasta de destino onde se deseja colocar os arquivos de imagem atualizados e clicar em 
Abrir. 


O Fireworks atualiza o código HTML e JavaScript no documento do Dreamweaver. Além 
disso, ele também exporta as imagens atualizadas associadas ao HTML e as coloca na pasta de 
destino especificada. 


Se o Fireworks não conseguir encontrar o código HTML correspondente para atualizar, ele 
oferecerá a opção de inserir o novo código HT'ML no documento do Dreamweaver. O 
Fireworks coloca a seção JavaScript do novo código no início do documento e coloca a tabela 
HTML ou o vínculo com a imagem no final. 


Exportação de um arquivo do Fireworks para uma biblioteca do 
Dreamweaver 


Os itens de biblioteca do Dreamweaver simplificam o processo de edição e atualização de 
componentes usados com fregiiência em sites na Web como, por exemplo, logotipos de empresas 
ou outros elementos gráficos que aparecem em todas as páginas de um site. Um item de biblioteca 
é uma parte de um arquivo HTML localizado em uma pasta denominada Library na raiz do site. 
Os itens de biblioteca aparecem na paleta Biblioteca do Dreamweaver. É possível arrastar uma 
cópia da paleta Biblioteca para qualquer página do site na Web. 


Não há possibilidade de se editar um item de biblioteca diretamente no documento do 
Dreamweaver; só é possível editar o item de biblioteca principal. Em seguida, pode-se fazer com 
que o Dreamweaver atualize cada cópia desse item, à medida que ela for colocada no site na Web. 
Os itens de biblioteca do Dreamweaver são muito semelhantes aos símbolos do Fireworks; as 
alterações feitas no documento da biblioteca principal (LBI) se refletem em todas as ocorrências 
da biblioteca no site. 


Para exportar um documento do Fireworks como um item de biblioteca do Dreamweaver: 


1 Escolher Arquivo > Exportar. 
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2 No menu pop-up Salvar como tipo, escolher Biblioteca do Dreamweaver (*.Ibi). 


Exportar 


Salvar em: [D sitel “10 [5 À ES Er 


@ index r2 c3 F2.gif q index r2 c7 f2.gif q index r3 c3.gif @ index + 
€ index +2 c3 f3.gif a index r2 c7 f3gif a index r4 c3.gif index + 
mm index r2 c5.gif mm index r2 co.gif E index_r4_c8.jpg @ index + 
€ index r2 c5 F2.gif q index r2 co f2oif q index r4 citigif Æ index + 
@ index r2 c5 F3.gif q index 12 c9 f3.gif q index r5 c3.gif @ index + 


index r2 c7.gif € index r2 ciO.gif a index r5 c4.gif @ index + 


< > 


Nome do arquivo: — [iindex.lbi ] 
Arquivos do tipo: Biblioteca do Dreamweaver [.Ibi) v | 


Fatias: 


C] Colocar imagens na subpasta 


Escolher a pasta Library no site do Dreamweaver como o local onde colocar os arquivos. Se essa 
pasta não existir, aparecerá a caixa de diálogo Selecionar pasta, que permite criar ou localizar 
uma pasta. O nome da pasta deve ser Library; o uso de maiúsculas e minúsculas é importante, 
pois o Dreamweaver distingue maiúsculas de minúsculas. 


Nota: O Dreamweaver não reconhecerá o arquivo exportado como um item de biblioteca, a menos que ele seja 
salvo na pasta Library. 


3 Na caixa de diálogo Exportar, digitar um nome de arquivo. 


4 Sea imagem contiver fatias, escolher as opções de fatiamento. Para mais informações, consultar 
“Exportação de um documento fatiado” na página 348. 


5 Selecionar Colocar imagens na subpasta para escolher uma pasta separada para salvar as 
imagens. 


6 Clicar em Salvar. 


Edição de um arquivo do Fireworks no Dreamweaver 


O Roundtrip HTML é um recurso eficiente que integra fisicamente o Fireworks e o 
Dreamweaver. Ele permite efetuar alterações em um aplicativo e fazer com que elas se reflitam 
integralmente no outro. Com o Roundtrip HT'ML, a integração iniciar-e-editar permite editar 
imagens e tabelas geradas pelo Fireworks e colocadas em um documento do Dreamweaver. O 
Dreamweaver inicia automaticamente o arquivo PNG de origem do Fireworks referente à imagem 
ou tabela colocada, permitindo que as edições desejadas sejam feitas no Fireworks. De volta ao 
Dreamweaver, as atualizações feitas no Fireworks são aplicadas à imagem ou tabela colocada. 


Nota: Antes de trabalhar com o Roundtrip HTML, é necessário executar algumas tarefas preliminares. Para mais 
informações, consultar “Definição de uma opção de iniciar-e-editar” na página 3/4. 
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Sobre o Roundtrip HTML 


O Fireworks reconhece e preserva a maioria dos tipos de edição feitas em um documento no 
Dreamweaver, incluindo vínculos alterados, mapas de imagens editados, HTML e texto editados 
em fatias HT'ML, bem como comportamentos compartilhados entre o Fireworks e o 
Dreamweaver. O Inspetor de propriedades do Dreamweaver ajuda a identificar, em um 
documento, imagens, fatias de tabelas e tabelas geradas pelo Fireworks. 


Embora o Fireworks aceite a maioria dos tipos de edição do Dreamweaver, alterações radicais 
feitas na estrutura de uma tabela no Dreamweaver poderão criar diferenças irreconciliáveis entre 
os dois aplicativos. Se o usuário fizer alterações profundas em um layout de tabela no 
Dreamweaver e, em seguida, tentar iniciá-la e editá-la no Fireworks, será exibida uma mensagem 
avisando que as alterações feitas no Fireworks substituirão todas as edições feitas anteriormente na 
tabela no Dreamweaver. Se o usuário desejar fazer alterações consideráveis em um layout de 
tabela, deverá utilizar o recurso iniciar-e-editar do Dreamweaver para editar a tabela no Fireworks. 


Edição de uma imagem do Fireworks 
O Fireworks permite editar imagens individuais colocadas em um documento do Dreamweaver. 


Nota: Antes de editar gráficos do Fireworks no Dreamweaver, é necessário executar algumas tarefas preliminares. 
Para mais informações, consultar “Definição de uma opção de iniciar-e-editar” na página 374. 


Para iniciar e editar uma imagem do Fireworks colocada no Dreamweaver: 


1 No Dreamweaver, escolher Janela > Propriedades para abrir o Inspetor de propriedades, se 
necessário. 


2 Seguir um dos seguintes procedimentos: 


* Selecionar a imagem desejada. (o Inspetor de propriedades identifica a seleção como uma 
imagem do Fireworks e exibe o nome do arquivo PNG de origem conhecido da imagem) Em 
seguida, no Inspetor de propriedades, clicar em Editar. 


* Manter pressionada a tecla Control (Windows) ou Command (Macintosh) e clicar duas vezes 
na imagem que deseja editar. 


e Clicar com o botão direito do mouse (Windows) ou manter pressionada a tecla Control 
(Macintosh) e clicar na imagem desejada, e escolher Editar com Fireworks no menu contextual. 


O Dreamweaver inicia o Fireworks, se este ainda não estiver aberto. 


3 Se perguntado, especificar se deseja localizar um arquivo de origem do Fireworks para a 
imagem colocada. Para mais informações sobre arquivos PNG de origem do Fireworks, 
consultar “Salva de um arquivo do Fireworks” na página 82. 


4 No Fireworks, editar a imagem. A janela do documento indica que o usuário está editando 
uma imagem a partir do Dreamweaver. 


O Dreamweaver reconhece e preserva todas as edições aplicadas à imagem no Fireworks. 
5 Quando terminar de fazer as edições, clicar em Concluído na janela do documento. 


A imagem é exportada com as configurações atuais de otimização, o arquivo GIF ou JPEG 
usado pelo Dreamweaver é atualizado e o arquivo PNG de origem é salvo, se tiver sido 
selecionado um arquivo de origem. 


Nota: O ato de abrir uma imagem a partir da janela Site do Dreamweaver não ativa os recursos de integração do 
Fireworks descritos acima; o Fireworks não abre o arquivo PNG original. Para usar os recursos de integração 
com o Fireworks, abrir as imagens a partir da janela do documento do Dreamweaver. 
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Edição de tabelas do Fireworks 


Quando o usuário inicia e edita uma fatia de imagem que faz parte de uma tabela colocada do 
Fireworks, o Dreamweaver automaticamente inicia o arquivo PNG de origem de toda a tabela. 


Nota: Antes de editar tabelas do Fireworks no Dreamweaver, é necessário executar algumas tarefas preliminares. 
Para mais informações, consultar “Definição de uma opção de iniciar-e-editar” na página 374. 

Para iniciar e editar uma tabela do Fireworks colocada no Dreamweaver: 

1 No Dreamweaver, escolher Janela > Propriedades para abrir o Inspetor de propriedades, se necessário. 
2 Seguir um dos seguintes procedimentos: 


e Clicar dentro da tabela e clicar no tag TABLE na barra de status para selecionar toda a tabela. (o Inspetor 
de propriedades identifica a seleção como uma tabela do Fireworks e exibe o nome do arquivo PNG de 
origem conhecido da tabela) Em seguida, no Inspetor de propriedades, clicar em Editar. 


e Clicar no canto superior esquerdo da tabela para selecioná-la e, em seguida, no Inspetor de 
propriedades, clicar em Editar. 


e Selecionar uma imagem na tabela e clicar em Editar no Inspetor de propriedades. 


* Manter pressionada a tecla Control (Windows) ou Command (Macintosh) e clicar duas vezes 
na imagem que deseja editar. 


e Clicar com o botão direito do mouse (Windows) ou manter pressionada a tecla Control 
(Macintosh) e clicar na imagem e escolher Editar com Fireworks no menu contextual. 


O Dreamweaver inicia o Fireworks, se este ainda não estiver aberto. O arquivo PNG de origem 
da tabela inteira aparece na janela do documento. 


Nota: Para mais informações sobre arquivos PNG de origem do Fireworks, consultar “Salva de um arquivo do 
Fireworks” na página 82. 


3 No Fireworks, fazer as edições desejadas. 
O Dreamweaver reconhece e preserva todas as edições aplicadas à imagem no Fireworks. 
4 Quando terminar de fazer as edições, clicar em Concluído na janela do documento. 


Os arquivos HTML e de fatias de imagem da tabela são exportados com as configurações atuais de 
otimização, a tabela colocada no Dreamweaver é atualizada e o arquivo PNG de origem é salvo. 


Sobre comportamentos do Dreamweaver 


Se um gráfico simples sem fatias do Fireworks for inserido em um documento do Dreamweaver e 
um comportamento do Dreamweaver for aplicado, esse gráfico terá uma fatia sobre ele quando 
for iniciado e editado no Fireworks. Inicialmente, a fatia não fica visível, porque as fatias são 
desativadas automaticamente ao se iniciar e editar gráficos simples sem fatias aos quais 
comportamentos do Dreamweaver estejam aplicados. Para exibir a fatia, basta ativar sua 


visibilidade na Camada da Web do painel Camadas. 


A exibição, no Fireworks, de propriedades de uma fatia com um comportamento do 
Dreamweaver anexado pode fazer com que a caixa de texto Link do Inspetor de propriedades 
exiba javascript:;. Não faz mal excluir esse texto. Se o usuário desejar digitar por cima dele 
para inserir um URL, o comportamento permanecerá inalterado no Dreamweaver. 


O Dreamweaver aceita todos os comportamentos aplicados no Fireworks, inclusive aqueles 
necessários para rollovers e botões. Os comportamentos do Dreamweaver especificados a seguir 
são aceitos pelo Fireworks durante uma sessão de iniciar-e-editar: 


è Rollover simples 
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Trocar imagem 


Restaurar imagem de troca 


Definir texto da barra de status 


Definir imagem da barra de navegação 


Menu pop-up 


Otimização de imagem e animação do Fireworks colocadas no Dreamweaver 


O usuário pode iniciar o Fireworks a partir do Dreamweaver para fazer alterações rápidas de 
exportação em imagens e animações colocadas do Fireworks, como fazer uma nova amostragem 
ou alterar o tipo do arquivo. O Fireworks permite fazer alterações nas configurações de otimização 
e de animação, bem como no tamanho e área da imagem exportada. 


Para alterar as configurações de otimização de uma imagem do Fireworks colocada no 
Dreamweaver: 


1 No Dreamweaver, selecionar a imagem desejada e escolher Comandos > Otimizar a imagem no 
Fireworks. 


2 Se perguntado, especificar se deseja iniciar um arquivo de origem do Fireworks para a imagem 
colocada. 


Uma caixa de diálogo é exibida. Embora a barra de título não exiba esse nome, essa é, na 
verdade, a caixa de diálogo Visualizar exportação do Fireworks. 


E Optimize pic01.jpg 


Opções | Arquivo | Animação JPEG Visualização [2] | Configurações salvas: 
80 (0) qualidade Milhões 


Dee TA JPEG - Melh lidade lE 
Formato: CER v 10.78K_tseg a 56kbps ob prt jH 


Qualidade: 80 | v 


SEF] EFE 
Suavização: | Sem suavização 


[ ] Progressiva 
[4] Aguçar bordas coloridas 


R:255 G:255 B:255 FfF 


Remover cores não usadas 


—r [REQ [00 {v ma ME E 
alal 


3 Fazer as edições desejadas na caixa de diálogo Visualizar exportação: 


* Para editar as configurações de otimização, clicar na guia Opções. Para mais informações, 
consultar “Como usar Visualizar exportação” na página 327. 
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e Para editar o tamanho e área da imagem exportada, clicar na guia Arquivo e alterar as 
configurações desejadas. Se o usuário alterar as dimensões da imagem no Fireworks, também 
será necessário redefinir o seu tamanho no Inspetor de propriedades quando retornar ao 
Dreamweaver. 


* Para editar as configurações de animação da imagem, clicar na guia Animação e alterar as 
configurações desejadas. 


4 Quando terminar de editar a imagem, clicar em Atualizar. 


A imagem será exportada com as novas configurações de otimização, o arquivo GIF ou JPEG 
colocado no Dreamweaver será atualizado e o arquivo PNG de origem será salvo, caso tenha 
sido selecionado um arquivo de origem. 


Se o formato da imagem tiver sido alterado, o verificador de vínculos do Dreamweaver 
solicitará a atualização das referências à imagem. Por exemplo, se o formato de uma imagem 
chamada minha imagem tiver sido alterado de GIF para JPEG, clicando-se em OK neste aviso 
alterará todas as referências a minha imagem.gif no site para minha imagem.jpg. 


Redimensionamento de uma imagem colocada do Fireworks 


Ao iniciar e otimizar uma imagem do Fireworks a partir do Dreamweaver, o usuário pode 
redimensionar a imagem e selecionar uma área específica da imagem para exportar. 


Nota: Se o usuário alterar as dimensões da imagem no Fireworks, também será necessário redefinir o seu tamanho 
no Inspetor de propriedades quando retornar ao Dreamweaver. 


Para especificar as dimensões da imagem exportada: 
1 No Fireworks, clicar na guia Arquivo na caixa de diálogo Visualizar exportação. 


2 Para colocar a imagem em escala ao exportá-la, especificar uma porcentagem de escala ou 
digitar a largura e a altura desejadas em pixels. Selecionar Restringir para colocar em escala a 
largura e a altura proporcionalmente. 


W Optimize pic01.jpg 


Opções | Arquivo | Animação 


A:[340 | Pixels 
[4] Restringir 


3 Para exportar uma área selecionada da imagem, selecionar a opção Área de exportação e seguir 
um dos seguintes procedimentos para especificar a área de exportação: 


è Arrastar a borda pontilhada que aparece em volta da visualização até que ela circunde a área de 
exportação desejada. (arrastar dentro da visualização a fim de mover áreas ocultas para a exibição) 


e Digitar as coordenadas de pixel para os limites da área de exportação. 


[4] Exportar área 
0 | tLjo | 


Ix 


I£ 


0 | &j | 
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Alteração de uma configuração de animação 


Durante o processo de iniciar e otimizar uma animação colocada no Fireworks também é possível 
editar as configurações da animação. As opções de animação na caixa de diálogo Visualizar 
exportação são semelhantes àquelas disponíveis no painel Molduras do Fireworks. 

Nota: Não é possível editar elementos gráficos individuais em uma animação do Fireworks durante uma sessão de 
otimização iniciada a partir do Dreamweaver. Para editar os elementos gráficos em uma animação, é necessário 


iniciar e editar a animação do Fireworks. Para mais informações, consultar “Edição de um arquivo do Fireworks no 
Dreamweaver” na página 369. 


Para editar uma imagem animada: 
1 No Fireworks, clicar na guia Animação na caixa de diálogo Visualizar exportação. 
2 Utilizar as técnicas a seguir para visualizar molduras de animação a qualquer momento: 


e Para exibir uma única moldura, selecionar a moldura desejada na lista do lado esquerdo da 
caixa de diálogo ou utilizar os controles de moldura na área inferior direita da caixa de diálogo. 


* Para reproduzir a animação, clicar no controle Reproduzir/Parar na área inferior direita da caixa 


de diálogo. 
3 Fazer as edições na animação: 


* Para especificar o método de eliminação de moldura, selecionar a moldura desejada na lista e 
escolher uma opção no menu pop-up (indicado pelo ícone de lixeira). 


* Para definir o retardo da moldura, selecionar a moldura desejada na lista e digitar o tempo de 
retardo em centésimos de segundo. 


W Optimize pic01.jpg 


Opções | Arquivo | Animação 


g 
7 
Ed Moldura 1 u 7 H00s 
EÈ | Moldura 2 u 7 | 


* Para configurar a animação de modo a reproduzi-la repetidamente, clicar no botão Ciclos e 
escolher o número desejado de repetições no menu pop-up. 


è Escolher a opção Cortar automático para cortar cada moldura como uma área retangular, de 
forma que apenas a área de imagem que difere entre as molduras seja exportada. A seleção dessa 
opção reduz o tamanho do arquivo. 


* Escolher a opção Diferença automática para exportar apenas os pixels que se alteram entre 
molduras. A seleção dessa opção reduz o tamanho do arquivo. 


Definição de uma opção de iniciar-e-editar 


Para usar efetivamente o Roundtrip HT'ML, é necessário executar algumas tarefas preliminares, 
como definir o Fireworks como o editor de imagem primário no Dreamweaver e especificar 
preferências de iniciar-e-editar no Fireworks. 


Nota: Além disso, é necessário definir um site local no Dreamweaver antes de trabalhar com o Roundtrip HTML. 
Para mais informações, consultar Usando o Dreamweaver MX. 
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Designação do Fireworks como o editor de imagem externo primário do 
Dreamweaver 


O Dreamweaver oferece preferências para iniciar automaticamente aplicativos específicos a fim de 
se editar determinados tipos de arquivo. Para usar os recursos iniciar-e-editar do Fireworks, 
certificar-se de que o Fireworks esteja definido como o editor primário para arquivos GIF, JPEG e 
PNG no Dreamweaver. 


Embora seja possível usar versões anteriores do Fireworks como editores de imagem externos, essas 
versões oferecem recursos iniciar-e-editar limitados. Ao trabalhar com o Roundtrip HT'ML, o 
Fireworks 4 não oferece suporte total a edições feitas em propriedades de células de tabelas do 
Dreameweaver, nem a comportamentos aplicados no Dreamweaver. O Fireworks 3 não fornece 
suporte completo à execução e edição de tabelas colocadas e fatias de tabelas, enquanto o Fireworks 2 
não oferece suporte à execução e edição de arquivos PNG de origem de imagens colocadas. 


Para definir o Fireworks como o editor de imagem externo primário no Dreamweaver: 


1 No Dreamweaver, escolher Editar > Preferências e escolher Tipos de arquivo/editores. 
2 Na lista Extensões, selecionar uma extensão de arquivo de imagem da Web (.gif, .jpg ou .png). 


3 Na lista Editores, selecionar Fireworks, se ele aparecer na lista. Caso o Fireworks não esteja na 
lista, clicar no botão do sinal de adição (+), localizar o aplicativo Fireworks no disco rígido e 
clicar em Abrir. 


Preferências 


Categoria Tipos de arquivos / editores 


Geral 
Acesso 
Barra de status 


Camadas E a E r 
Codificação por cores Editor de código externo: | 


Dicas de código z 

Elementos invisíveis Recarregar os arquivos | Solicitar 

Estilos CSS =s 

Fontes Salvar na iniciação: | Solicitar 

Formato do código x 

ae aiz FE 
ainéis 

Quick Tag Editor Extensões | | Editores 

Realce Fi ks4 

Regravação de código -Png renoma. T 

Site E Fireworks(Primário) 

-Ipa ipe jpeg 

Validador „wav 

Visualização de layout „aiff aif .aifc 

Visualizar no navegador .mp3 

.mpg -mpeg 


Abrir na visualização de código: lis „txt „asa .css .cs .config 


| ( Cancelar ] ( Ajuda J 


4 Clicar em Tornar primário. 


5 Repetir as etapas de 2 a 4 para definir o Fireworks como o editor primário para outras extensões 
de arquivo de imagem da Web. 
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Sobre Design Notes e arquivos de origem 


Sempre que um arquivo do Fireworks é exportado de uma origem PNG salva para um site do 
Dreamweaver, o Fireworks escreve uma Design Note que contém informações sobre o arquivo. 
Por exemplo, durante a exportação de uma tabela do Fireworks, este escreve uma Design Note 
para cada imagem exportada. Essas Design Notes contêm referências ao arquivo PNG de origem 
que gerou os arquivos exportados. 


Quando uma imagem do Fireworks é iniciada e editada a partir do Dreamweaver, o Dreamweaver 
usa uma Design Note para localizar um arquivo PNG de origem para esse arquivo. Para obter 
melhores resultados, é recomendável salvar sempre o arquivo PNG de origem do Fireworks e os 
arquivos exportados em um site do Dreamweaver. Isso garante que qualquer usuário que 
compartilhe o site possa localizar o PNG de origem ao iniciar o Fireworks a partir do 
Dreamweaver. 


Especificação de uma preferência de iniciar-e-editar para um arquivo de 
origem do Fireworks 


As preferências de iniciar-e-editar do Fireworks permitem especificar como manipular arquivos 
PNG de origem ao iniciar arquivos do Fireworks a partir de outro aplicativo. 


O Dreamweaver reconhece as preferências de iniciar-e-editar do Fireworks apenas em 
determinadas situações em que se inicia e otimiza uma imagem do Fireworks. Especificamente, é 
necessário iniciar e otimizar uma imagem que não seja parte de uma tabela do Fireworks e que 
não contenha um caminho correto na Design Note para um arquivo PNG de origem. Em todas 
as demais situações, inclusive em todos os casos de iniciar-e-editar imagens do Fireworks, o 
Dreamweaver inicia automaticamente o arquivo PNG de origem, solicitando localizar esse 
arquivo de origem caso não possa ser encontrado. 


Para especificar preferências de iniciar-e-editar para o Fireworks: 
1 No Fireworks, escolher Editar > Preferências. 
Nota: No Mac OS X, escolher Fireworks > Preferências. 


2 Clicar na guia Iniciar e editar (Windows) ou escolher Iniciar e editar no menu pop-up 
(Macintosh). 


3 Especificar as opções de preferência a serem utilizadas durante a edição ou otimização de 
imagens do Fireworks colocadas em um aplicativo externo: 


Usar sempre o PNG de origem inicia automaticamente o arquivo PNG do Fireworks que está 
definido na Design Note como a origem da imagem colocada. As atualizações são feitas tanto 
no PNG de origem quanto na sua imagem colocada correspondente. 


Nunca usar PNG de origem inicia automaticamente a imagem colocada do Fireworks, 
independentemente da existência ou não de um arquivo PNG de origem. As atualizações são 
feitas apenas na imagem colocada. 


Perguntar ao iniciar permite especificar toda vez se o usuário deseja ou não iniciar o arquivo 
PNG de origem. Durante a edição ou otimização de uma imagem colocada, o Fireworks exibe 
uma mensagem perguntando se o usuário deseja tomar uma decisão sobre iniciar-e-editar. 
Também é possível especificar preferências globais de iniciar-e-editar nessa mensagem. 
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Como trabalhar com o Macromedia Flash MX 


Há uma integração perfeita entre o Fireworks e o Macromedia Flash. É simples exportar vetores, 
bitmaps, animações e gráficos de botões de múltiplos estados do Fireworks para usar no Flash. A 
funcionalidade iniciar-e-editar também facilita a edição de gráficos do Fireworks no Flash. 


Nota: Os comportamentos dos botões do Fireworks e outros tipos de interatividade não são importados para o Flash. 


Colocação de um arquivo do Fireworks no Flash 


Há várias maneiras de se colocar gráficos do Fireworks no Flash. A melhor delas é importar um 
arquivo PNG do Fireworks. Esse método proporciona maior controle sobre a forma de 
importação dos gráficos e animações para o Flash. 


Embora ofereça menos controle do que a importação de PNGs do Fireworks, também permite 
importar arquivos JPEG, GIF, PNG e SWF que foram exportados do Fireworks. Também existe a 
opção de se copiar manualmente gráficos do Fireworks e colá-los diretamente no Flash. 


Importação de um arquivo PNG do Fireworks para o Flash 


É possível importar arquivos PNG de origem do Fireworks diretamente para o Flash sem 
necessitar exportá-los para qualquer outro formato gráfico. Todos os vetores, bitmaps, animações 
e gráficos de botões de múltiplos estados do Fireworks podem ser importados para o Flash. 


Nota: Os comportamentos dos botões do Fireworks e outros tipos de interatividade não são importados para o Flash. 


Há diversas opções de importação de arquivos PNG do Fireworks para o Flash à escolha: importar 
todos os objetos e camadas como um símbolo de biblioteca ou importar todo o conteúdo para 
uma única camada nova. Com relação a objetos vetoriais e de texto, é possível manter sua 
editabilidade ou optar por manter a aparência somente quando os objetos tiverem efeitos 
aplicados ou outras propriedades que não estejam disponíveis no Flash. Uma outra opção é abster- 
se de toda a editabilidade e optar por importar o arquivo PNG do Fireworks como uma única 
imagem bitmap plana. 


Para importar um arquivo PNG do Fireworks para o Flash: 


1 Salvar o documento desejado no Fireworks. 


Para mais informações sobre como salvar arquivos, consultar “Salva de um arquivo do 
Fireworks” na página 82. 


2 Alternar para um documento aberto no Flash. 


3 (Opcional) Clicar na moldura principal e na camada para a qual o conteúdo do Fireworks será 
importado. Isso só será necessário se o usuário for importar o PNG como um símbolo de 


biblioteca (clipe de filme). 


4 Escolher Arquivo > Importar. 
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5 Navegar até o arquivo PNG desejado, selecioná-lo na caixa de diálogo Importar e clicar em OK. 


A caixa de diálogo Configurações de importação de PNG do Fireworks é exibida. 


Configuración de la importación PNG de Fireworks E 


Estructura de archivo: (3) Importar como un clip de película y mantener capas 
(D Importar en una nueva capa de la escena actual 


Objetos: (2) Rasterizar, si es necesario, para mantener el aspecto 
(O Mantener editables todos los trayectos 


Texto: (3) Rasterizar, si es necesario, para mantener el aspecto 
(O Mantener editable todo el texto 


[C] Importar como una única imagen sin capas 


6 Escolher uma opção de Estrutura de arquivos: 


Importar como clipe de filme e manter camadas importa o arquivo do Fireworks como um clipe 
de filme que contém todas as camadas e molduras do arquivo original do Fireworks. O clipe de 
filme é inserido na moldura principal e na camada atuais. Se uma moldura principal não for 
selecionada antes da importação, o clipe de filme será colocado na moldura principal anterior. 


Importar para nova camada na cena atual importa o arquivo do Fireworks para uma única 
camada nova, com todas as suas molduras intactas. 


7 Escolher a forma de importação de texto e objetos vetoriais desejada: 


Converter se necessário para manter a aparência preserva a editabilidade de objetos vetoriais, a 
menos que tenham preenchimentos, traços ou efeitos especiais aos quais o Flash não ofereça suporte. 
Para manter a aparência desses objetos, o Flash os converte em imagens bitmap não editáveis. 


Manter todos os traçados editáveis preserva a editabilidade de todos os objetos vetoriais. Se os 
objetos contiverem preenchimentos, traços ou efeitos especiais aos quais o Flash não ofereça 
suporte, essas propriedades serão perdidas. 


8 Escolher a forma de importação de texto desejada: 


Converter se necessário para manter a aparência preserva a editabilidade do texto, a menos 
que tenha preenchimentos, traços ou efeitos especiais aos quais o Flash não ofereça suporte. 
Para manter a aparência desse texto, o Flash o converte em imagem bitmap não editável. 


Manter todo o texto editável preserva a editabilidade de todo o texto. Se o texto contiver 
preenchimentos, traços ou efeitos especiais aos quais o Flash não ofereça suporte, essas 
propriedades serão perdidas. 


9 Escolher a opção Importar como um único bitmap nivelado para importar o arquivo como uma 
única imagem bitmap e perder toda a editabilidade. 


Nota: Se essa opção for selecionada, nenhuma das outras opções da caixa de diálogo ficarão disponíveis. 


10 Clicar em OK. 


O arquivo PNG do Fireworks é importado para o Flash com as opções de importação escolhidas. 
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Como copiar e colar um gráfico do Fireworks no Flash 
Uma maneira rápida de colocar gráficos do Fireworks no Flash é copiá-los e colá-los. 
Nota: Para copiar gráficos em versões anteriores do Flash, é necessário escolher Editar > Copiar contornos de traçado. 


Durante o processo de copiar gráficos do Fireworks e colá-los no Flash, perdem-se alguns 
atributos, como Efeitos ao vivo e texturas. Além disso, o Flash oferece suporte somente a 
preenchimentos sólidos e dégradé e a traços básicos. 


Para copiar e colar gráficos no Flash: 
1 Selecionar o objeto ou objetos a serem copiados. 


2 Escolher Editar > Copiar ou clicar no botão Exportação rápida e escolher Copiar no menu 
pop-up do Macromedia Flash. 


3 No Flash, criar um novo documento e escolher Editar > Colar. 


Nota: Talvez seja necessário desagrupar objetos com Modificar > Desagrupar para que eles possam ser 
editados como objetos vetoriais separados no Flash. 


Sobre exportação de gráficos do Fireworks para outros formatos para 
usar no Flash 


É possível exportar gráficos do Fireworks como arquivos JPEG, GIF e PNG e, em seguida, 
importá-los para o Flash. 


Para mais informações sobre como exportar JPEGs e GIFs, consultar “Exportação de uma 
imagem simples” na página 348. Para mais informações sobre como exportar para o formato 
PNG, consultar “Exportação de PNG com transparência” na página 381. Para mais informações 
sobre como importar qualquer um desses formatos para o Flash, consultar “Importação de 
animação e gráficos exportados do Fireworks para o Flash” na página 381. 


Nota: Embora PNG seja o formato de arquivo nativo do Fireworks, os arquivos gráficos PNG exportados do 
Fireworks são diferentes dos arquivos PNG de origem salvos no Fireworks. Os arquivos PNG exportados não são 
diferentes dos GlFs ou JPEGs; eles contêm somente dados de imagens e não contêm informações adicionais, 
como fatias, camadas, interatividade, Efeitos ao vivo ou outro conteúdo editável. Para mais informações sobre 
arquivos PNG de origem, consultar “Salva de um arquivo do Fireworks” na página 82. 


Exportação de gráficos e animação do Fireworks como um arquivo SWF 


É possível exportar gráficos e animações do Fireworks como arquivos SWF do Flash. Há várias 
opções de exportação de objetos à sua escolha. 


Algumas formatações são perdidas, a menos que o usuário escolha Manter aparência na caixa de 
diálogo Opções de exportação do Flash SWE O tamanho e a cor do traço são mantidos. As 
formatações perdidas durante a exportação para o formato SWF incluem as seguintes: 


e Efeitos ao vivo 
e Categorias de traço e preenchimento, texturas e bordas enevoadas 


* Suavização de serrilhado em objetos (o Flash Player aplica a suavização de serrilhado no nível 
do documento; portanto, ela é aplicada ao documento durante a exportação) 


* Modos de mistura e opacidade (objetos com opacidade tornam-se símbolos com um canal alfa). 
e Camadas 


e Máscaras 
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Objetos de fatia, mapas de imagem e comportamentos 


Algumas opções de formatação de texto, como kerning e traços de bitmap 


Para exportar um gráfico ou animação do Fireworks como arquivo SWF: 


1 


8 
9 


Escolher Arquivo > Exportar ou clicar no botão Exportação rápida e escolher Exportar SWF no 
menu pop-up do Macromedia Flash. 


Na caixa de diálogo Exportar, digitar um nome de arquivo e escolher uma pasta de destino. 
Escolher Macromedia Flash SWF no menu pop-up Salvar como. 
Clicar no botão Opções. 


A caixa de diálogo Opções de exportação do Flash SWF é exibida. 


Opções de exportação do Macromedia FL... E3 


Objetos: © Manter traçados 
(O) Manter aparência 


Texto: (2) Manter editabilidade 
O Converter em traçados 


Qualidade do JPEG: |100 v 


Molduras: (9) Tudo i 
(D De: para 


Taxa de molduras: | 15 por segundo 


Para uma melhor editabilidade no Flash, escolha Manter 
traçados e Manter editabilidade do texto. 


Para optar pela aparência em detrimento da editabilidade e 
tamanho do arquivo, escolha Manter aparência e Converter 
texto em traçados. 


Na seção Objetos, escolher uma das seguintes opções: 


Manter traçados permite manter a editabilidade dos traçados. Os efeitos e a formatação são 


perdidos. 


Manter aparência converte objetos vetoriais em objetos bitmap e preserva a aparência de traços 
e preenchimentos aplicados. A editabilidade é perdida. 


Na seção Texto, escolher uma das seguintes opções: 


Manter editabilidade permite manter a editabilidade do texto. Os efeitos e a formatação são 


perdidos. 


Converter em traçados converte texto em traçados, preservando qualquer kerning ou 
espaçamento personalizado inserido no Fireworks. A editabilidade do texto é perdida. 


Definir a qualidade de imagens JPEG com o controle deslizante do pop-up Qualidade JPEG. 
Selecionar as molduras a serem exportadas e a taxa de molduras em segundos. 


Clicar em OK. 


10 Na caixa de diálogo Exportar, clicar em Salvar. 


Para mais informações sobre como importar um arquivo SWF exportado para o Flash, consultar 
“Importação de animação e gráficos exportados do Fireworks para o Flash” na página 381. 
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Exportação de PNG com transparência 


O formato PNG permite transparência com imagens coloridas de 32 bits. O PNG do Fireworks, 
o formato de arquivo de origem do programa, também oferece suporte para transparência com 
imagens coloridas de 32 bits. Há uma opção de importação de arquivos PNG de origem do 
Fireworks diretamente para o Flash. 


Também é possível criar transparências com um PNG de 8 bits. Existe a possibilidade de exportar 
gráficos PNG de 8 bits do Fireworks com transparência para inserir no Flash. 
Para exportar um PNG de 8 bits com transparência: 


1 No Fireworks, escolher Janela > Otimizar, para abrir o painel Otimizar, se ele ainda não estiver 
aberto. 


2 No menu pop-up Transparência, escolher PNG 8 como Exportação de formato de arquivo e 
Transparência alfa. 


3 Escolher Arquivo > Exportar. 


4 No menu pop-up Salvar como tipo, selecionar Somente imagens. Dar um nome ao arquivo e 
clicar em Salvar. 


Para mais informações sobre como importar arquivos PNG exportados para o Flash, consultar 
“Importação de animação e gráficos exportados do Fireworks para o Flash” na página 381. 


Importação de animação e gráficos exportados do Fireworks para o Flash 


O comando Importar do Flash importa gráficos e animações que foram exportados do Fireworks. 


Para importar gráficos e animações do Fireworks para o Flash: 
1 Criar um novo documento no Flash. 
2 Escolher Arquivo > Importar e localizar o arquivo do gráfico ou animação. 


3 Clicar em Abrir para importar o arquivo. 


Uso do Fireworks na edição de um gráfico importado para o Flash 


Com a integração iniciar-e-editar, o usuário pode utilizar o Fireworks para fazer alterações em um 
gráfico importado anteriormente para o Flash. É possível editar qualquer gráfico importado dessa 
maneira, mesmo que ele não tenha sido exportado do Fireworks. 


Nota: Os arquivos PNG nativos do Fireworks importados para o Flash são uma exceção, a menos que tenham sido 
importados como imagem bitmap plana. 


Se o gráfico for exportado do Fireworks e o arquivo PNG original for salvo junto com o arquivo 
gráfico exportado, será possível abrir o arquivo PNG original no Fireworks a partir do Flash para 
fazer alterações. De volta ao Flash, tanto o arquivo PNG como o gráfico serão atualizados. 


1 No Flash, clicar com o botão direito do mouse (Windows) ou manter pressionada a tecla Control 
(Macintosh) e clicar no arquivo gráfico no painel Biblioteca. 


2 Escolher Editar com Fireworks no menu pop-up. 


Nota: Se Editar com Fireworks não aparecer no menu pop-up, escolher Editar com e localizar o 
aplicativo Fireworks. 


3 Na caixa Localizar origem, clicar em Sim, se desejar localizar o arquivo PNG original do gráfico 
do Fireworks e clicar em Abrir. 
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Nota: Essa caixa de diálogo poderá não aparecer se as preferências de iniciar-e-editar do Fireworks tiverem 
sido alteradas. 


A arquivo se abre no Fireworks e a janela do documento indica que o arquivo está sendo 
editado a partir do Flash. 


4 Fazer alterações na imagem e clicar em Concluído quando terminar. 


O Fireworks exporta um novo arquivo gráfico para o Flash e, caso o arquivo PNG original tenha 
sido editado, ele também será salvo. 


Sobre como ampliar o Fireworks com comandos personalizados criados no Flash 


Com o Flash, é possível criar filmes SWF que contêm código JavaScript. Esses filmes podem ser 
usados como comandos do Fireworks, acessíveis a partir do menu Comandos do Fireworks, ou 
como painéis, acessíveis a partir do menu Janela. 


Para mais informações, consultar Extending Fireworks MX, disponível como PDF no CD de 
instalação do Macromedia Fireworks. 


Como trabalhar com o Macromedia FreeHand 


Visto que ambos os aplicativos oferecem suporte a vetores, é simples compartilhar gráficos 
vetoriais entre o Fireworks e o Macromedia FreeHand. No entanto, a aparência dos objetos pode 
ficar diferente entre os aplicativos, pois o Fireworks e o FreeHand não compartilham todos os 
recursos. Para mais informações, consultar “Como trabalhar com outros aplicativos gráficos 
vetoriais” na página 385. 


Os procedimentos fornecidos nesta seção se aplicam não apenas ao uso do Fireworks com o FreeHand, 
mas também ao uso do Fireworks com outros aplicativos gráficos vetoriais, como o Adobe Illustrator e 
o CorelDraw. Para mais informações, consultar “Como trabalhar com outros aplicativos gráficos 
vetoriais” na página 385. 

Colocação de um gráfico do FreeHand no Fireworks 


Há várias maneiras de se colocar gráficos do FreeHand no Fireworks: importá-los, copiá-los e 
colá-los ou arrastá-los e soltá-los. O Fireworks MX oferece suporte a gráficos do FreeHand 7 ou 
mais recente. 


Importação de um gráfico do FreeHand para o Fireworks 


O Fireworks pode importar gráficos vetoriais criados no FreeHand. Durante a importação de um 
gráfico do FreeHand, é possível definir as seguintes opções: 


Escala especifica a porcentagem de escala para o arquivo importado. 
Largura e altura especifica a largura e a altura do arquivo importado em pixels, polegadas ou centímetros. 
Resolução especifica a resolução do arquivo importado. 


Suavização de serrilhado suaviza objetos importados para evitar bordas serrilhadas. Esta opção 
pode ser escolhida separadamente para traçados ou texto. 


Nota: Para alterar objetos selecionados para Suavização de serrilhado ou Borda acentuada, usar Modificar > Alterar > 
Preenchimento acentuado, Suavizar serrilhado do preenchimento e Preenchimento suave depois da importação. 


Conversão de arquivo especifica o tratamento dado a documentos com várias páginas durante sua 
importação: 
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e A opção Abrir uma página importa apenas a página especificada. 


e A opção Abrir páginas como moldura importa todas as páginas do documento e coloca cada 
uma em uma moldura separada. 


* A opção Ignorar camadas importa todos os objetos em uma única camada. 
e A opção Lembrar camadas mantém a estrutura de camadas do arquivo importado. 


* A opção Converter camadas em molduras coloca cada camada do documento importado em 
uma moldura separada. 


Incluir camadas invisíveis importa objetos em camadas que tenham sido desativadas. Caso 
contrário, as camadas invisíveis serão ignoradas. 


Incluir camadas de fundo importa objetos da camada de fundo do documento. Caso contrário, a 
camada de fundo será ignorada. 


Renderizar como imagens renderiza grupos complexos, misturas ou preenchimentos lado a lado e 
coloca cada um como um objeto bitmap simples em um documento do Fireworks. Digitar um 
número na caixa de texto para determinar quantos objetos um grupo, uma mistura ou um 
preenchimento lado a lado pode conter antes de ser renderizado durante a importação. 


Para importar gráficos vetoriais de um arquivo do FreeHand: 


1 No Fireworks, escolher Arquivo > Abrir para navegar até o arquivo desejado do FreeHand, e 
clicar em Abrir. 


A caixa de diálogo Opções de arquivo vetorial é exibida. 


Opções de arquivo vetorial 


Escala:| 1004 


Largura: 612| | Pixels 


Altura: 792| | Pixels 


Resolução: 72| | PixelsiPolegadas 


Suavização de serrilhado: Traçados Texto | Suavização 


Conversão de arquivo: 


| Abrir uma página Página: 1 


| Lembrar camadas 
[C] Incluir camadas invisíveis 


Incluir camadas de fundo 


Renderizar como imagens: 


[4] Agrupar em | 30| objetos 


[4] Mesclar em 30 etapas 


M Preencher lado a lado sobre 30 | objetos 


2 Escolher as opções desejadas. 
3 Clicarem OK. 
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Como copiar e colar ou arrastar e soltar um gráfico do FreeHand no 
Fireworks 


Uma maneira rápida de se colocar gráficos do FreeHand no Fireworks envolve copiar e colar ou 
arrastar e soltar esses gráficos. 

Para copiar e colar um gráfico selecionado do FreeHand no Fireworks: 

1 No FreeHand, escolher Editar > Copiar. 

2 Criar um novo documento no Fireworks ou abrir um existente. 


3 Escolher Editar > Colar. 


Para arrastar e soltar um gráfico do FreeHand no Fireworks: 


Arrastar o gráfico do FreeHand para um documento aberto no Fireworks. 


Colocação de um gráfico do Fireworks no FreeHand 
O Fireworks oferece a opção de exportar traçados vetoriais para o FreeHand, assim como copiar e 
colar gráficos vetoriais no FreeHand. 
Para exportar um gráfico vetorial para o FreeHand: 


1 No Fireworks, escolher Arquivo > Exportar ou clicar no botão Exportação rápida e escolher 
Exportar para o FreeHand no menu pop-up do FreeHand. 


2 Na caixa de diálogo Exportar, digitar um nome de arquivo e escolher uma pasta de destino. 

3 Escolher Illustrator 7 no menu pop-up Salvar como. 
Nota: Illustrator 7 é o formato de arquivo gráfico usado para exportar do Fireworks para qualquer outro aplicativo 
gráfico vetorial, inclusive o Macromedia FreeHand. A maioria dos aplicativos vetoriais lê o formato de arquivo do 
Illustrator 7. 

4 Clicar no botão Opções. 


5 Na caixa de diálogo Opções de exportação do Illustrator, escolher uma das seguintes opções: 


* Exportar apenas a moldura atual preserva nomes de camadas e exporta somente a moldura 
atual. 


e Converter molduras em camadas exporta cada moldura do Fireworks como uma camada. 
6 Escolher Compatível com o FreeHand a fim de exportar o arquivo para utilizar no FreeHand. 


A seleção de Compatível com o FreeHand omite bitmaps e converte preenchimentos dégradé 
em preenchimentos sólidos. 


7 Clicarem OK. 
8 Na caixa de diálogo Exportar, clicar em Salvar. 

Nota: Ao exportar, o Fireworks define as bordas dos objetos como acentuadas. 
9 Alternar para um documento aberto no FreeHand. 


10 Escolher Arquivo > Abrir ou Arquivo > Importar para navegar até o arquivo exportado do 
Fireworks e clicar em Abrir. 
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Como copiar e colar um vetor no FreeHand 


O comando Copiar contornos de traçado copia traçados selecionados do Fireworks para o 
FreeHand. Esse comando copia apenas traçados do Fireworks. 


Nota: O método copiar-e-colar de colocação de vetores do Fireworks em outros aplicativos funciona não apenas 
com o FreeHand, mas também com o Illustrator, CorelDraw e Adobe Photoshop. 


Para copiar traçados selecionados do Fireworks: 


1 Escolher Editar > Copiar contornos de traçado ou clicar no botão Exportação rápida e escolher 
Copiar contornos de traçado no menu pop-up do FreeHand. 


2 Alternar para um documento aberto no FreeHand. 


3 Escolher Editar > Colar para colar os traçados. 


Como trabalhar com outros aplicativos gráficos vetoriais 


O Fireworks pode compartilhar gráficos vetoriais com outros aplicativos gráficos vetoriais, 
inclusive o Adobe Illustrator e o Corel Draw. No Fireworks, o processo de exportação e 
importação de gráficos vetoriais desses aplicativos é idêntico ao processo de exportação e 
importação de gráficos do Macromedia FreeHand. Para mais informações, consultar “Como 
trabalhar com o Macromedia FreeHand” na página 382. 


Recursos sem suporte 


Como o Fireworks e outros editores de gráficos vetoriais nem sempre compartilham os mesmos 
recursos, a aparência dos objetos ficará diferente entre um aplicativo e outro. 


A maioria dos outros editores de gráficos vetoriais, inclusive o Macromedia FreeHand, não oferece 
suporte aos seguintes recursos do Fireworks: 


e Efeitos ao vivo 

* Modos de mistura 

e “Textura, padrão, preenchimentos de pontilhamento Web e preenchimentos dégradé 
* Objetos de fatia e mapas de imagem 

e Várias opções de formatação de texto 

e Cores de telas, guias e grades 

e Imagens bitmap 

e Alguns traços 


Nota: Como a maioria dos outros aplicativos gráficos vetoriais não oferece suporte a esses recursos, o Fireworks 
não os inclui ao exportar para esses aplicativos. 


Da mesma forma, o Fireworks não é compatível com todos os recursos encontrados em outros 
editores de gráficos vetoriais. Por exemplo, ao importar arquivos do CorelDraw (CDR), o 
Fireworks faz os seguintes ajustes para levar em conta os recursos sem suporte: 


* O conteúdo da página principal é repetido em cada moldura do Fireworks. 


* Apenas os dois objetos finais de uma mistura do CorelDRAW são importados. Os objetos são 
agrupados após a importação. 


* As dimensões são convertidas em objetos vetoriais. 
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e O texto básico é importado. Não há suporte para a maioria dos parâmetros de caractere e 
parágrafo. 


e As cores são convertidas em RGB. 


Nota: O Fireworks não abre arquivos compactados do CorelDraw. 


Como trabalhar com o Macromedia Director 


Combinados, o Fireworks e o Director oferecem recursos extremamente eficientes. O Fireworks 
permite exportar gráficos e conteúdo interativo para o Director. O processo de exportação 
preserva os comportamentos e fatias do gráfico. A exportação de imagens em fatias com rollovers e 
até mesmo de imagens em camadas é uma operação segura. Isso permite que os usuários do 
Director tirem vantagem das ferramentas de otimização e projeto gráfico do Fireworks sem 
comprometer a qualidade. 


Nota: O Director 8.0 ou anterior requer o download e a instalação da versão gratuita do Fireworks Import Xtra para 
Director em http:/Avww.macromedia.comybr/. 
Colocação de um arquivo do Fireworks no Director 


O Director pode importar imagens planas do Fireworks, como JPEGs e GIFs, assim como 
imagens PNG de 32 bits com transparência. No caso de conteúdo interativo, animado e em fatias, 
o Director pode importar HTML do Fireworks. 


Para mais informações sobre como exportar imagens planas do Fireworks, como JPEGs e GIFs, 
consultar “Exportação de uma imagem simples” na página 348. 


Exportação de um gráfico com transparência 


No Director, é possível obter transparência através da importação de imagens PNG de 32 bits. O 
aplicativo oferece a opção de exportação de gráficos PNG de 32 bits com transparência a partir do 
Fireworks. 

Para exportar um PNG de 32 bits com transparência: 


1 No Fireworks, escolher Janela > Otimizar, alterar o formato do arquivo de exportação para 
PNG 32 e definir o Mate como transparente. 


2 Escolher Arquivo > Exportar. 


3 No menu pop-up Salvar como tipo, selecionar Somente imagens. Dar um nome ao arquivo e 
clicar em Salvar. 


Exportação de conteúdo em fatias e em camadas para o Director 


O processo de exportação de fatias do Fireworks para o Director permite exportar conteúdo 
interativo e em fatias, como botões e imagens de rollover. O processo de exportação de camadas 
para o Director permite exportar conteúdo em camadas do Fireworks, como animações. 


Para exportar arquivos do Fireworks para o Director: 

1 No Fireworks, escolher Arquivo > Exportar. 
Nota: Uma outra alternativa é clicar no botão Exportação rápida e escolher Origem como camadas ou Origem 
como fatias no menu pop-up do Director. Escolher Origem como camadas se exportar uma animação e Origem 


como fatias se exportar conteúdo interativo, como botões. 


2 Na caixa de diálogo Exportar, digitar um nome de arquivo e escolher uma pasta de destino. 
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6 
7 


No menu pop-up Salvar como, escolher Director. 
No menu pop-up Origem, escolher uma opção: 


Camadas do Fireworks exporta todas as camadas do documento. Escolher esta opção se 
exportar conteúdo em camadas ou uma animação. 


Fatias do Fireworks exporta as fatias do documento. Escolher esta opção se exportar conteúdo 
interativo ou em fatias, como botões ou imagens de rollover. 


Selecionar Aparar imagens para cortar automaticamente as imagens exportadas, de modo a 
ajustar os objetos em cada moldura. 


Selecionar Colocar imagens na subpasta para escolher uma pasta para as imagens. 


Clicar em Salvar. 


Importação de um arquivo do Fireworks para o Director 


O Director oferece a opção de importação de imagens planas que foram exportadas do Fireworks, 
como JPEGs, GIFs e PNGs de 32 bits. Uma outra possibilidade é importar camadas, fatias e 
elementos interativos do Fireworks através da inserção de HTML do Fireworks. 


Para importar uma imagem plana do Fireworks: 


1 
2 
3 


No Director, escolher File > Import. 
Navegar até o arquivo desejado e clicar em Import. 


Se desejar, alterar as opções na caixa de diálogo Image Options. Para mais informações sobre 
cada opção, consultar Usando o Director. 


Clicar em OK. 


O gráfico importado aparecerá no elenco como um bitmap. 


Para importar conteúdo interativo, em fatias ou em camadas do Fireworks: 


1 


No Director, escolher Insert > Fireworks > Images from Fireworks HT'ML. 


Nota: O nome e a localização desse comando de menu podem ser diferentes, dependendo da versão do 
Director. 
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2 Localizar o arquivo HTML do Fireworks que foi exportado para uso no Director. 


A caixa de diálogo Open Fireworks HTML é exibida. 


Open Fireworks HTML 


Examinar: | O Export 


images 
K index.htm] 


Nome do arquivo: | index.htm 
Arquivos do tipo: HTML (htm) v] 


Color: | 32-Bit with Alpha ~ 


Registration: | Common Center Point 


Import to Score 
Import Rollover Behaviors as Lingo 


3 Se desejar, alterar as opções: 


Color permite especificar a intensidade da cor para os gráficos importados. Se eles contiverem 
transparência, escolher cores de 32 bits. 


Registration permite definir o ponto de registro para os gráficos importados. 
Import Rollover Behaviors as Lingo converte comportamentos do Fireworks em código Lingo. 
Import to Score coloca membros do elenco em Score upon import. 
4 Clicar em Open. 
Os gráficos e o código do arquivo HTML do Fireworks são importados. 
Nota: Se o usuário importar uma animação do Fireworks, arrastar as molduras principais no Director para 
deslocar a cronometragem de cada camada importada, conforme necessário. 
Edição de um membro do elenco do Director no Fireworks 
Com a integração iniciar-e-editar, é possível fazer alterações em membros do elenco do Director. 
Para isso, basta iniciar o Fireworks para editá-los a partir do Director. Há também a opção de 
iniciar o Fireworks a partir do Director para otimizar membros do elenco. 
Para iniciar o Fireworks e editar um membro do elenco do Director: 


1 No Director, clicar com o botão direito do mouse (Windows) ou manter pressionada a tecla 
Control (Macintosh) e clicar no gráfico na janela Cast. 


2 Escolher Launch External Editor no menu pop-up. 


Nota: Se o Fireworks não iniciar como editor de imagem externo, escolher File > Preferences > Editors, no 
Director, e definir o Fireworks como o editor externo para tipos de arquivo gráfico de bitmap. 
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A arquivo se abre no Fireworks e a janela do documento indica que o arquivo está sendo 
editado a partir do Director. 


DM image1.png @ 100% 
3 
Original | visualização | 2paracima | 4 para cima 


D Editando a partir de Director 


159231 100% + 


3 Fazer alterações na imagem e clicar em Concluído quando terminar. 


O Fireworks exporta o novo gráfico para o Director. 


Otimização de um membro do elenco no Director 
É possível iniciar o Fireworks a partir do Director para fazer alterações rápidas e otimizar membros 


selecionados do elenco. 


Para iniciar o Fireworks e alterar as configurações de otimização de um membro do elenco do 
Director: 


1 No Director, selecionar o membro do elenco na janela Cast e clicar em Otimizar no Fireworks, 
na guia Bitmap do Inspetor de propriedades. 


2 No Fireworks, alterar as configurações de otimização da maneira desejada. 


3 Quando terminar, clicar em Atualizar. Clicar em Concluído se a caixa de diálogo MIX Editing 
aparecer. 


A imagem é exportada de volta para o Director com as novas configurações. 


Como trabalhar com o Macromedia HomesSite 


Juntos, o Fireworks e o HomeSite oferecem recursos para a criação e edição de páginas da Web. É 
simples exportar e abrir HTML do Fireworks no HomeSite, bem como inserir gráficos do 
Fireworks em documentos do HomeSite. Mas o que é ainda mais importante, o Fireworks e o 
HomeSite compartilham uma integração perfeita que permite iniciar o Fireworks a partir do 
HomeSite para a edição de gráficos da Web. 


Colocação de uma imagem do Fireworks no HomesSite 


É possível inserir imagens GIF ou JPEG geradas pelo Fireworks em um documento do HomeSite. 
Mas, primeiro é preciso exportar as imagens do Fireworks. Para mais informações sobre como 
exportar imagens GIF e JPEG, consultar “Exportação de uma imagem simples” na página 348. 
Para inserir uma imagem do Fireworks em um documento do HomesSite: 

1 No HomeSite, salvar o documento. 


Nota: O HomeSite cria caminhos relativos para as imagens, mas só poderá fazer isso se o documento estiver salvo. 


2 Na janela Resources, navegar até a imagem do Fireworks que foi exportada. 
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3 Criar um vínculo com a imagem do Fireworks no documento: 


è Arrastar o arquivo da janela Resources até a posição desejada no código HTML na guia Edit da 
janela do documento. 


e Naguia Edit da janela do documento, posicionar o ponto de inserção no local em que deseja 
inserir a imagem do Fireworks e clicar com o botão direito do mouse no arquivo na janela 
Resources e escolher Insert as Link. 


Um vínculo com a imagem do Fireworks é criado no código HT'ML. Clicar na guia Browse para 
visualizar a imagem no documento. 


Colocação de HTML do Fireworks no HomeSite 


Há várias maneiras de se colocar HTML do Fireworks no HomeSite: exportar ou copiar HTML 
do Fireworks para a Área de transferência, eabrir o arquivo HTML exportado do Fireworks no 
HomeSite e copiar e colar seções de código selecionadas. Além disso, é fácil atualizar o código 
exportado para o HomeSite com o comando Atualizar HTML do Fireworks. 

Nota: Antes de exportar, copiar ou atualizar HTML do Fireworks para utilizar no HomeSite, certificar-se de definir o 


tipo de HTML como Genérico na caixa de diálogo Configuração do HTML. Para mais informações, consultar 
“Configuração de opções de exportação de HTML” na página 359. 


Exportação de HTML do Fireworks para o HomeSite 


A exportação de HT'ML do Fireworks gera um arquivo HTML e os arquivos de imagens associados 
no local especificado. O usuário pode então abrir o arquivo HTML para edição no HomeSite. 


Nota: Antes de exportar, certificar-se de definir o tipo de HTML como Genérico na caixa de diálogo Configuração 
do HTML. Para mais informações, consultar “Configuração de opções de exportação de HTML” na página 359. 


Para exportar HTML do Fireworks para o HomesSite: 


Exportar o documento para HTML no Fireworks e abrir o arquivo exportado no HomeSite 
escolhendo File > Open. Consultar “Exportação de HTML do Fireworks” na página 354. 


Cópia de HTML do Fireworks para a Área de transferência para usar no 
HomeSite 


Uma maneira rápida de se colocar um HTML gerado pelo Fireworks no HomeSite é copiá-lo do 
Fireworks para a Área de transferência e colá-lo diretamente em um documento do HomeSite. 
Durante o processo de cópia de HTML do Fireworks para a Área de transferência, as imagens 
necessárias são exportadas para o local especificado. 

Nota: Antes de copiar para a Área de transferência, certificar-se de definir o tipo de HTML como Genérico na caixa 


de diálogo Configuração do HTML. Para mais informações, consultar “Configuração de opções de exportação de 
HTML” na página 359. 


Para copiar HTML do Fireworks para uso no HomeSite: 


Copiar o HTML para a Área de transferência no Fireworks e colá-lo em um novo documento do 
HomeSite. Consultar “Como copiar um HTML para a Área de transferência” na página 355. 


Como copiar código de um arquivo exportado do Fireworks e colá-lo no 
HomeSite 


E possível abrir um arquivo HTML exportado do Fireworks no HomeSite e, em seguida, copiar e 
colar manualmente apenas as seções desejadas em outro documento do HomeSite. 
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Nota: Antes de exportar, certificar-se de definir o tipo de HTML como Genérico na caixa de diálogo Configuração 
do HTML. Para mais informações, consultar “Configuração de opções de exportação de HTML” na página 359. 


Para copiar código de um arquivo exportado do Fireworks e colá-lo no HomesSite: 


Exportar um arquivo HTML do Fireworks e copiar e colar o código desejado em um documento 
existente do Dreamweaver. Consultar “Como copiar e colar HTML de um arquivo do Fireworks 
exportado” na página 356. 


Atualização de HTML do Fireworks exportado para o HomeSite 


O comando Atualizar HTML permite fazer alterações em um documento HTML do Fireworks 
que foi exportado anteriormente para o HomeSite. 


Nota: Antes de atualizar HTML, certificar-se de definir o tipo de HTML como Genérico na caixa de diálogo 
Configuração do HTML. Para mais informações, consultar “Configuração de opções de exportação de HTML” na 
página 359. 

Para atualizar HTML do Fireworks exportado para o HomeSite: 


Usar o comando Atualizar HTML do Fireworks. Consultar “Atualização de um HTML 
exportado” na página 357. 


Edição de uma imagem do Fireworks no HomesSite 


À integração iniciar-e-editar permite a edição de imagens em um documento do HomeSite. O 
HomeSite inicia automaticamente o Fireworks, permitindo que o usuário faça as edições 
desejadas na imagem. Ao sair do Fireworks, as atualizações são aplicadas automaticamente à 
imagem colocada no HomeSite. Juntos, os dois aplicativos proporcionam um fluxo de trabalho 
simplificado para a edição de gráficos da Web em páginas HTML. 

Para iniciar e editar imagens do Fireworks colocadas no HomesSite: 

1 No HomeSite, salvar o documento. 

2 Seguir um dos seguintes procedimentos: 

e Clicar com o botão direito do mouse nas guias Files na janela Resources. 

e Clicar com o botão direito do mouse na imagem na guia Thumbnails da janela Results. 


e Clicar com o botão direito do mouse no tag <img> associado no código HTML na guia Edit da 
janela do documento. 


3 No menu pop-up, escolher Edit in Macromedia Fireworks. 
O HomesSite inicia o Fireworks, se este ainda não estiver aberto. 


4 Se perguntado, especificar se deseja localizar um arquivo de origem do Fireworks para a 
imagem colocada. Para mais informações sobre arquivos PNG de origem do Fireworks, 
consultar “Salva de um arquivo do Fireworks” na página 82. 


5 No Fireworks, editar a imagem. 


A janela do documento indica que o usuário está editando uma imagem do Fireworks partir de 
outro aplicativo. 


6 Quando terminar de fazer as edições, clicar em Concluído na janela do documento. 


A imagem atualizada é exportada novamente para o HomeSite e o arquivo PNG de origem é 
salvo, se tiver sido selecionado um arquivo de origem. 
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Como trabalhar com o Microsoft FrontPage 


O Fireworks apresenta recursos de integração sofisticados quando utilizado em combinação com 
vários aplicativos, mesmo com produtos que não sejam da Macromedia. O Fireworks simplifica o 
processo de criação e edição de design de páginas da Web com o Microsoft FrontPage. Com o 
recurso Roundtrip HTML, é fácil iniciar o Fireworks a partir do FrontPage para criar ou editar 
gráficos e tabelas HT'ML. O Roundtrip HT'ML, um eficiente recurso de integração que o Fireworks 
compartilha com o FrontPage e com o Macromedia Dreamweaver, permite efetuar alterações em 
um aplicativo e fazer com que elas se reflitam integralmente no outro. 


Colocação de uma imagem do Fireworks no FrontPage 


Há várias maneiras de se colocar gráficos do Fireworks em um documento do FrontPage: colocar 
um gráfico concluído do Fireworks no FrontPage com o uso do o menu Inserir ou criar um novo 
gráfico do Fireworks clicando no botão Editar no Fireworks, localizado na barra de ferramentas 
principal do FrontPage. 


Inserção de uma imagem do Fireworks no FrontPage 


É possível inserir imagens GIF ou JPEG geradas pelo Fireworks diretamente em um documento 
do FrontPage. Mas, primeiro é necessário exportar as imagens do Fireworks. Para mais 
informações sobre como exportar imagens GIF e JPEG, consultar “Exportação de uma imagem 
simples” na página 348. 

Para inserir uma imagem do Fireworks em um documento do FrontPage: 


1 No modo de exibição Editar ou Código, posicionar o ponto de inserção no local em que deseja 
que a imagem apareça. 


2 Escolher Inserir > Figura > Do arquivo. 


3 Navegar até o arquivo desejado do Fireworks e clicar em OK. 


Criação de uma nova imagem do Fireworks no FrontPage 
O usuário pode iniciar o Fireworks a partir do FrontPage para criar uma imagem sem fatias. 


Nota: Se o usuáiro desejar criar uma imagem em fatias, primeiro será necessário criar e exportar uma imagem 
simples sem fatias. E, em seguida, iniciar e editar novamente o gráfico no Fireworks para adicionar fatias e 
interatividade. Para mais informações sobre como iniciar e editar gráficos existentes no FrontPage, consultar 
“Edição de um arquivo do Fireworks no FrontPage” na página 394. 


Para criar uma imagem sem fatias do Fireworks no FrontPage: 


1 Na barra de ferramentas principal do FrontPage, clicar no botão Iniciar e editar elemento gráfico 
selecionado no Fireworks. 


2 Quando aparecer uma mensagem perguntando se deseja criar uma nova imagem, clicar em 
Sim. O Fireworks será iniciado, se ainda não estiver aberto. 


3 Abrir um novo documento no Fireworks e criar uma imagem. 


4 Escolher Arquivo > Salvar quando terminar. Na caixa de diálogo Salvar como, especificar um 
nome e local para o arquivo PNG de origem e clicar em Salvar. 


Para mais informações sobre como salvar arquivos PNG do Fireworks, consultar “Salva de um 
arquivo do Fireworks” na página 82. 
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5 Escolher Arquivo > Exportar. Na caixa de diálogo Exportar, especificar um nome e local para o 
arquivo de imagem exportado. 


6 Na caixa de diálogo Exportar, clicar em Salvar para exportar o arquivo. 
7 Retornar ao FrontPage. 


8 No modo de exibição Editar ou Código, posicionar o ponto de inserção no local em que deseja 
que a imagem apareça. 


9 Escolher Inserir > Figura > Do arquivo. 


10 Navegar até o arquivo de imagem recém-exportado e clicar em Inserir. 


Colocação de HTML do Fireworks no FrontPage 


Há várias maneiras de se colocar um HTML do Fireworks no FrontPage: exportar HTML ou 
copiar HTML do Fireworks para a Área de transferência. Uma outra possibilidade é abrir o 
arquivo HTML exportado do Fireworks no FrontPage e copiar e colar seções de código 
selecionadas. Além disso, é fácil atualizar o código exportado para o FrontPage com o comando 
Atualizar HTML do Fireworks. 


Nota: Antes de exportar, copiar ou atualizar HTML do Fireworks para utilização no FrontPage, certificar-se de 
escolher FrontPage como tipo de HTML na caixa de diálogo Configuração do HTML. Para mais informações, 
consultar “Configuração de opções de exportação de HTML” na página 359. 


Exportação de HTML do Fireworks para o FrontPage 


A exportação de HTML do Fireworks gera um arquivo HTML e os arquivos de imagens 
associados no local especificado. O usuário pode então abrir o arquivo HTML para edição no 
FrontPage. 

Nota: Antes de exportar HTML do Fireworks para utilização no FrontPage, certificar-se de escolher FrontPage 


como tipo de HTML na caixa de diálogo Configuração do HTML. Para mais informações, consultar “Configuração 
de opções de exportação de HTML” na página 359. 


Para exportar HTML do Fireworks para o FrontPage: 


Exportar o documento do Fireworks para HTML e abrir o arquivo HTML exportado no 
FrontPage escolhendo Arquivo > Abrir. Consultar “Exportação de HTML do Fireworks” na 
página 354. 


Cópia de HTML do Fireworks para a Área de transferência para uso no 
FrontPage 


Uma maneira rápida de se colocar um HT'ML gerado pelo Fireworks no FrontPage é copiá-lo do 
Fireworks para a Área de transferência e colá-lo diretamente em um documento do FrontPage. 
Todo o código HTML e JavaScript associado ao documento do Fireworks é copiado para o 
documento do FrontPage e todas as imagens são exportadas para o local especificado. 


Nota: Antes de se copiar HTML do Fireworks para utilização no FrontPage, certificar-se de escolher FrontPage 
como o tipo de HTML na caixa de diálogo Configuração do HTML. Para mais informações, consultar 
“Configuração de opções de exportação de HTML” na página 359. 


Para copiar HTML do Fireworks para a Área de transferência para uso no FrontPage: 


Copiar HTML para a Área de transferência no Fireworks e colá-lo em um novo documento do 
FrontPage. Consultar “Como copiar um HTML para a Área de transferência” na página 355. 
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Nota: Esse método não será recomendável se o documento do Fireworks contiver botões ou outros elementos 
interativos que exijam código JavaScript, pois será necessário modificar o código HTML e JavaScript depois de 
colado no FrontPage. Para mais informações, consultar “Exportação de HTML” na página 352. 


Como copiar código de um arquivo exportado do Fireworks e colá-lo no 
FrontPage 


É possível abrir um arquivo HTML exportado do Fireworks no FrontPage e copiar e colar 
manualmente apenas as seções desejadas em outro documento do FrontPage. 
Nota: Antes de exportar do Fireworks, certificar-se de escolher FrontPage como o tipo de HTML na caixa de 


diálogo Configuração do HTML. Para mais informações, consultar “Configuração de opções de exportação de 
HTML” na página 359. 


Para copiar código de um arquivo exportado do Fireworks e colá-lo no FrontPage: 


Exportar um arquivo HTML do Fireworks e copiar e colar o código desejado em um documento 
existente do FrontPage. Consultar “Como copiar e colar HTML de um arquivo do Fireworks 
exportado” na página 356. 


Atualização de HTML do Fireworks exportado para o FrontPage 


O comando Atualizar HTML permite fazer alterações em um documento HTML do Fireworks 
que tenha sido exportado anteriormente para o FrontPage. 
Nota: Antes de atualizar HTML do Fireworks, certificar-se de escolher FrontPage como o tipo de HTML na caixa 


de diálogo Configuração do HTML. Para mais informações, consultar “Configuração de opções de exportação de 
HTML” na página 359. 


Para atualizar HTML do Fireworks exportado para o FrontPage: 


Usar o comando Atualizar HTML do Fireworks. Consultar “Atualização de um HTML 
exportado” na página 357. 


Edição de um arquivo do Fireworks no FrontPage 


E fácil usar o Fireworks e o FrontPage juntos com o Roundtrip HTML, um recurso que permite 
efetuar alterações em um aplicativo e fazer com que elas se reflitam integralmente no outro. 


Com o Roundtrip HTML, a integração iniciar-e-editar permite a edição de imagens e tabelas 
geradas pelo Fireworks e colocadas em um documento do FrontPage. O FrontPage inicia o 
Fireworks automaticamente, permitindo que o usuário faça as edições desejadas na imagem. As 
atualizações feitas no Fireworks são aplicadas automaticamente à imagem colocada no FrontPage. 
Juntos, os dois aplicativos proporcionam um fluxo de trabalho simplificado para edição e 
colocação de arquivos gráficos da Web em páginas HTML. 


Para iniciar e editar imagens do Fireworks colocadas no FrontPage: 


1 No FrontPage, salvar o documento. 


2 Selecionar a fatia de tabela ou imagem que se deseja editar e clicar no botão Iniciar e editar 
elemento gráfico selecionado no Fireworks. 


O FrontPage inicia o Fireworks, se este ainda não estiver aberto. 


3 Se perguntado, especificar se deseja iniciar um arquivo de origem do Fireworks para a fatia de 
tabela ou imagem colocada. Para mais informações sobre arquivos PNG de origem do Fireworks, 
consultar “Salva de um arquivo do Fireworks” na página 82. 
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Nota: Quando o usuário inicia e edita uma imagem ou fatia que faz parte de uma tabela do Fireworks, este 
programa abre automaticamente o arquivo PNG de origem de toda a tabela. 


4 No Fireworks, editar a imagem. A janela do documento indica que o usuário está editando 
uma imagem do Fireworks partir do FrontPage. 


5 Quando terminar de fazer as edições, clicar em Concluído na janela do documento. 


A imagem ou o HTML é exportada com as configurações atuais de otimização, o gráfico usado 
pelo FrontPage é atualizado e o arquivo PNG de origem é salvo, se tiver sido selecionado um 
arquivo de origem. 


Como trabalhar com o Adobe Photoshop 


O Fireworks fornece um suporte excelente para a importação de arquivos criados no Photoshop 
(PSD) e oferece opções para a manutenção de vários aspectos dos arquivos importados, inclusive 
camadas, máscaras e texto editável. Isso permite levar para o Fireworks as imagens do Photoshop 
para uma edição mais detalhada e otimização para a Web, sem perder a possibilidade de reexportá- 
las para o Photoshop. 


Colocação de um gráfico do Photoshop no Fireworks 


É possível arrastar e soltar gráficos individuais do Photoshop no Fireworks, bem como importar 
um arquivo inteiro do Photoshop. 


Como arrastar e soltar um gráfico individual do Photoshop no Fireworks 


Uma maneira de se colocar gráficos do Photoshop no Fireworks é arrastá-los e soltá-los. 


Para arrastar e soltar um gráfico do Photoshop no Fireworks: 
Arrastar o gráfico do Photoshop para um documento aberto no Fireworks. 


Cada gráfico arrastado se torna um novo objeto bitmap. O texto também é importado como 
objeto bitmap e perde sua editabilidade como texto. Para mais informações, consultar “Sobre 
importação de texto do Photoshop” na página 396. 


Importação de um arquivo do Photoshop para o Fireworks 


Quando o usuário importa ou abre um arquivo do Photoshop no Fireworks, ele é importado para 
um arquivo PNG de acordo com as preferências de importação especificadas. Além de preservar as 
camadas e o texto, conforme especificado nas opções de importação, o Fireworks preserva e 
converte os seguintes recursos do Photoshop: 


e Conversão de máscaras de camada em máscaras de objeto do Fireworks. 


e Os efeitos de camada são convertidos em Efeitos ao vivo do Fireworks, se houver um Efeito ao 
vivo correspondente. Por exemplo, o efeito de camada Aplicar sombra é convertido em um 
Efeito ao vivo Aplicar sombra no Fireworks. 


Nota: Os efeitos de camada e os efeitos ao vivo podem variar um pouco na aparência. 


* Modos de mistura de camadas são convertidos em modos de mistura do Fireworks para objetos 
correspondentes, se o Fireworks oferecer suporte a esses modos de mistura. 


e O primeiro canal alfa na paleta Canais é convertido em áreas transparentes na imagem do 
Fireworks. O Fireworks não oferece suporte a canais alfa adicionais do Photoshop. 
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O Fireworks não fornece suporte para camadas de ajuste, grupos de recorte e traçados do 
Photoshop. O Fireworks ignora esses recursos quando importa arquivos do Photoshop. 


Nota: No Windows, os nomes de arquivo do Photoshop devem incluir uma extensão PSD para que o Fireworks 
reconheça o tipo de arquivo do Photoshop. 

Para importar um arquivo do Photoshop para o Fireworks: 

1 Escolher Arquivo > Importar ou Arquivo > Abrir e navegar até um arquivo do Photoshop (PSD). 
2 Clicar em Abrir. 


O arquivo do Photoshop é importado para um arquivo PNG. Se o usuário fizer alterações e desejar 
salvar o arquivo como PSD, primeiro será necessário exportá-lo para o formato PSD. Para mais 
informações, consultar “Colocação de um gráfico do Fireworks no Photoshop” na página 398. 


Sobre importação de texto do Photoshop 
É possível abrir ou importar um arquivo Photoshop que contenha texto. 


Ao abrir arquivos do Photoshop que contêm texto, o Fireworks verifica se existem as fontes necessárias 
no sistema. Se não houver, o Fireworks perguntará se deve substituir as fontes ou manter sua aparência. 
Para mais informações, consultar “Tratamento de fontes ausentes” na página 184. 


Se o texto do arquivo do Photoshop contiver efeitos suportados pelo Fireworks, os efeitos ainda 
serão aplicados quando levados para o Fireworks. No entanto, como o Fireworks e o Photoshop 
aplicam efeitos de maneiras distintas, os efeitos talvez fiquem diferentes em cada um dos aplicativos. 


Quando arquivos do Photoshop 6 ou 7 contendo texto são abertos ou importados no Fireworks, 
uma imagem do texto armazenada em cache é exibida para que sua aparência permaneça 
inalterada em relação à imagem do Photoshop. Depois que o texto for editado, a imagem 
armazenada em cache será substituída pelo texto real, que poderá ser diferente em aparência em 
relação ao texto original. 

Nota: O Fireworks não exporta texto no formato do Photoshop 6 ou 7. Se o usuário editar um documento que 
contenha texto do Photoshop 6 ou 7 e, em seguida, reexportar o documento para o Photoshop, o arquivo será 
exportado no formato do Photoshop 5.5. Entretanto, se não fizer alterações no texto, o arquivo será exportado no 


formato do Photoshop 6. Para mais informações sobre como exportar arquivos do Photoshop, consultar 
“Colocação de um gráfico do Fireworks no Photoshop” na página 398. 


Especificação de opções para importar arquivo do Photoshop 

As opções do Fireworks para preferências de importação permitem especificar como manipular as 
camadas e o texto nos arquivos importados do Photoshop. Dependendo das opções escolhidas, o 
usuário pode controlar o grau da aparência e editabilidade dos arquivos importados. 

Para especificar as opções de importação para arquivos do Photoshop: 

1 Escolher Editar > Preferências. 


Nota: No Mac OS X, escolher Fireworks > Preferências. 


2 Clicar na guia Importar (Windows) ou escolher Importar no menu pop-up (Macintosh). 
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3 Especificar as opções de importação: 


Camadas: Converter em objetos do Fireworks importa cada camada do arquivo do Photoshop 
como um objeto separado em uma única camada do Fireworks. 


Camadas: Compartilhar camada entre molduras torna visíveis as camadas importadas em todas 
as molduras do arquivo do Fireworks. 


Camadas: Converter em molduras importa cada camada do arquivo do Photoshop como um 
objeto em uma moldura separada do Fireworks. Essa opção é útil para a importação de 
arquivos a serem usados como animações. 


Texto: Editável converte o texto do arquivo do Photoshop em texto editável do Fireworks. Essa 
opção permite editar texto importado com a ferramenta Texto do Fireworks e o Inspetor de 
propriedades. O texto convertido poderá variar um pouco na aparência quando comparado 
com o original. 


Texto: Manter a aparência converte o texto do arquivo do Photoshop em um objeto bitmap do 
Fireworks. Esta opção mantém a aparência original do texto, mas não permite edição com a 
ferramenta Texto do Fireworks. 


Usar imagem plana composta importa o arquivo do Photoshop como uma imagem plana, sem 
camadas. 


4 Clicar em OK. 


Importação de filtro e plug-in do Photoshop 


O Fireworks permite a importação de filtros e plug-ins do Photoshop e de terceiros para a janela 
Efeitos ao vivo ou para o menu Filtros. Importar filtros para qualquer um desses locais os 
disponibiliza em ambos. 


Nota: Os filtros e plug-ins do Photoshop 6 e 7 não são compatíveis com o Fireworks MX. No Macintosh, filtros de 
terceiros criados para execução no Mac OS 9 são compatíveis com o Fireworks MX, quando em execução no Mac 
OS 9, e filtros de terceiros criados para execução no Mac OS X são compatíveis com Fireworks MX, quando em 
execução no Mac OS X. 
Para mais informações sobre a janela Efeitos ao vivo e o menu Filtros, consultar “Uso de Efeitos ao 
vivo” na página 213. 
Para importar plug-ins e filtros do Photoshop e de terceiros usando a caixa de diálogo 
Preferências: 
1 Escolher Editar > Preferências. 

Nota: No Mac OS X, escolher Fireworks > Preferências. 
2 Clicar na guia Pastas (Windows) ou escolher Pastas no menu pop-up (Macintosh). 


3 Escolher a opção Plug-Ins do Photoshop. 


A caixa de diálogo Selecionar uma pasta (Windows) ou Selecionar uma pasta (Macintosh) se 
abre. 


Nota: Caso ela não abra automaticamente, clicar em Procurar. 


4 Navegar até a pasta em que os plug-ins e filtros do Photoshop ou de outros programas estão 
instalados e clicar em Selecionar (Windows) ou Escolher (Macintosh). 


5 Clicar em OK para fechar a caixa de diálogo Preferências. 
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6 Reiniciar o Fireworks para carregar os filtros e plug-ins. 


Para importar plug-ins e filtros do Photoshop e de terceiros com o uso da caixa de diálogo Efeitos 
ao vivo: 


1 Selecionar algum objeto vetorial, objeto bitmap ou bloco de texto na tela e clicar no botão 
Adicionar efeitos no Inspetor de propriedades. 


Nota: O botão Adicionar efeitos só estará disponível quando um objeto estiver selecionado na tela. 
2 No menu pop-up que é exibido, escolher Opções > Localizar plug-ins. 


3 Navegar até a pasta em que os plug-ins e filtros do Photoshop ou de outros programas estão 
instalados e clicar em Selecionar (Windows) ou Escolher (Macintosh). Se for exibida uma 
mensagem perguntando se deseja reiniciar o Fireworks, clicar em OK. 


4 Reiniciar o Fireworks, para carregar os filtros e plug-ins. 


Colocação de um gráfico do Fireworks no Photoshop 


O Fireworks proporciona amplo suporte para a exportação de arquivos no formato do Photoshop 
(PSD). As configurações de exportação permitem controlar quais elementos do arquivo 
permanecerão editáveis quando o arquivo for reaberto no Photoshop. 


Uma imagem do Fireworks exportada para o Photoshop mantém a mesma editabilidade quando 
reaberta no Fireworks como outro elemento gráfico do Photoshop. As opções de exportação para 
editabilidade, aparência e tamanho do arquivo permitem determinar o melhor procedimento 
possível de exportação para o gráfico específico. Os usuários do Photoshop podem trabalhar com 
seus gráficos no Fireworks e continuar a edição no Photoshop. 


Para exportar um arquivo no formato do Photoshop: 


1 Escolher Arquivo > Exportar ou clicar no botão Exportação rápida e escolher Outro > Exportar 
para o Photoshop. 


2 Na caixa de diálogo Exportar, dar nome ao arquivo e escolher Photoshop PSD no menu Salvar 
como. 


3 Para especificar configurações de exportação agrupadas, escolher uma opção do menu 
Configurações. Essas configurações fornecem combinações predefinidas de opções de 
exportação individuais para objetos, efeitos e texto no arquivo do Fireworks. As opções de 
exportação individuais são descritas com detalhes em “Personalização de um arquivo para 
exportar para o Photoshop” na página 399. 


e Manter a editabilidade sobre a aparência converte objetos em camadas, mantém efeitos 
editáveis e converte o texto em camadas editáveis de texto do Photoshop. Escolher esta opção se 
desejar editar imagens de forma extensiva no Photoshop e não tiver necessidade de preservar a 
aparência exata da imagem do Fireworks. 


e Manter a aparência do Fireworks converte cada objeto em uma camada individual do 
Photoshop e transforma efeitos e texto em itens não editáveis. Escolher esta opção para manter 
o controle sobre os objetos do Fireworks no Photoshop, mas também manter a aparência 
original da imagem do Fireworks. 


* Arquivo Photoshop menor nivela cada camada em um imagem totalmente renderizada. 
Escolher esta opção se estiver exportando um arquivo que contém um grande número de 
objetos do Fireworks. 
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* Personalizar permite escolher configurações específicas para objetos, efeitos e texto. 
4 Clicar em Salvar para exportar o arquivo do Photoshop. 
Nota: O Photoshop 5.5 e versões anteriores não abrem arquivos com mais de 100 camadas. Será necessário 
excluir ou mesclar objetos se o documento do Fireworks que for exportado contiver mais de 100 objetos. 
Personalização de um arquivo para exportar para o Photoshop 
Ao exportar um arquivo para o Photoshop, o usuário pode escolher configurações personalizadas 
para a exportação de objetos, efeitos e texto. 
Para personalizar configurações de exportação para o Photoshop: 


1 Na caixa de diálogo Exportar, enquanto Photoshop PSD estiver selecionado como o tipo de 
arquivo de exportação, escolher Personalizar no menu pop-up Configurações. 


2 No menu pop-up Objetos, escolher uma das seguintes opções: 


Converter em camadas do Photoshop converte objetos individuais do Fireworks em camadas 
do Photoshop e máscaras do Fireworks em máscaras de camada do Photoshop. 


Nivelar cada camada do Fireworks nivela todos os objetos do Fireworks para uma única 
camada do Photoshop. A escolha desta opção suprime a capacidade de editar os objetos do 
Fireworks no Photoshop, assim como os recursos, como modos de mistura, que estão 
associados aos objetos do Fireworks. 


3 No menu pop-up Efeitos, escolher uma das seguintes opções: 


Manter a editabilidade converte Efeitos ao vivo do Fireworks em seus equivalentes no 
Photoshop. Se os efeitos não existirem no Photoshop, serão descartados. 


Renderizar efeitos transforma efeitos em objetos. A escolha desta opção preserva a aparência 
dos efeitos, mas não permite sua edição no Photoshop. 


4 No menu pop-up Texto, escolher uma das seguintes opções: 


Manter a editabilidade converte o texto em uma camada editável do Photoshop. A formatação 
de texto que não for suportada pelo Photoshop será perdida. 


Renderizar texto transforma o texto em um objeto de imagem. A escolha desta opção preserva 
a aparência do texto, mas não permite sua edição. 


Sobre como trabalhar com o Adobe GoLive 


Juntos, o Fireworks e o Adobe® GoLiveº permitem a criação e a edição de páginas da Web. É 
possível exportar e copiar HTML do Fireworks para o Adobe GoLive da mesma maneira que com 
a maioria dos outros editores de HT'ML. A única exceção é que é necessário escolher GoLive 
HTML como o estilo de HTML antes de exportar ou copiar HTML do Fireworks. 


Para mais informações sobre como escolher um estilo HT'ML, consultar “Configuração de opções 
de exportação de HTML” na página 359. Para mais informações sobre como exportar e copiar 
HTML do Fireworks, consultar “Exportação de HTML” na página 352. 


Nota: O estilo HTML do Adobe GoLive não oferece suporte a código de menu pop-up. Se o documento do 
Fireworks contiver menus pop-up, escolher Generic HTML como o estilo de HTML antes da exportação. 
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Sobre como trabalhar com editores de HTML 


O Fireworks gera HTML puro que todos os editores de HT'ML lêem. Para informações gerais 
sobre como colocar HTML do Fireworks em editores de HTML, consultar “Exportação de 
HTML” na página 352. 


O Fireworks oferece recursos de integração especiais para o Macromedia Dreamweaver, 
Macromedia HomeSite e Microsoft FrontPage. Para mais detalhes sobre como trabalhar com esses 
aplicativos, consultar Capítulo 16, “Uso do Fireworks com outros aplicativos”, na página 363. 


O Fireworks também pode importar conteúdo de HTML. Esse é um recurso eficiente que 
permite abrir e editar a maioria dos documentos HTML no Fireworks. Para mais informações, 
consultar “Criação de arquivo PNG do Fireworks a partir de arquivos HTML” na página 78. 
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CAPÍTULO 17 
Automatização de uma tarefa repetitiva 


Os Web designers muitas vezes ficam sobrecarregados de tarefas repetitivas como, por exemplo, 
otimizar imagens ou converter imagens para adaptá-las a determinadas restrições. Um fator que 
contribui para a potência do Macromedia Fireworks MX é sua capacidade de automatizar e 
simplificar várias tarefas tediosas de desenho, edição e conversão de arquivos. 


O recurso Localizar e substituir agiliza o processo de edição pesquisando e substituindo elementos 
dentro de um arquivo ou elementos de múltiplos arquivos. É possível localizar e substituir 
elementos como URLs, fontes, cor, texto e comandos criados no painel Histórico. 


O recurso Processo em lote converte grupos inteiros de arquivos de imagem em outros formatos, 
além de alterar as paletas de cores. O Processo em lote pode aplicar configurações de otimização 
personalizadas a grupos de arquivos. Esse recurso também pode redimensionar um grupo de 
arquivos, o que faz dele uma ferramenta ideal para a criação de miniaturas. 


O painel Histórico oferece opções para criar comandos, que são atalhos para os recursos usados 
com mais fregiência, ou criar um script que possa executar uma série complexa de etapas. O 
Fireworks entende e executa JavaScript. Assim, usuários avançados podem automatizar tarefas 
muito complexas escrevendo comandos em JavaScript e, em seguida, executando-os dentro do 
Fireworks.É possível controlar quase todos os comandos ou configurações do Fireworks por meio 
de comandos JavaScript especiais que o Fireworks pode interpretar. 


O Extension Manager possibilita a importação, instalação e exclusão de extensões em aplicativos 
Macromedia para estender os recursos do Fireworks. 
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Localizar e substituir 


O recurso Localizar e substituir ajuda a pesquisar e substituir elementos como texto, URLs, fontes 
e cores. Localizar e substituir pode pesquisar no documento atual ou em múltiplos arquivos. 


O uso desse recurso faz com que o Fireworks rastreie e armazene um registro das alterações no 
painel Registro de projeto. Localizar e substituir só funciona em arquivos PNG do Fireworks ou 
em arquivos que contenham objetos vetoriais, como arquivos do FreeHand, CorelDRAW 
descompactado e Illustrator. 


Pesquisar documento | Opção Pesquisar 
| Localizar testo | Opção Localizar 


Palavra inteira 


[ | Coincidir maiúse.tminúse. 
[ ] Expressões regulares 


Localizar 
Substituir tudo 


Painel Localizar e substituir 


Para selecionar a origem da pesquisa: 
1 Abrir o documento. 
2 Para abrir o painel Localizar e substituir, seguir um destes procedimentos: 


* Escolher Janela > Localizar e substituir. 


Escolher Editar > Localizar e substituir. 


Pressionar Control+F (Windows) ou Command+F (Macintosh). 


w 


No menu pop-up Pesquisar, escolher a origem da pesquisa: 


Pesquisar seleção localiza e substitui elementos apenas entre os objetos selecionados no 
momento e o texto. 


Pesquisar moldura localiza e substitui elementos apenas dentro da moldura atual. 
Pesquisar documento localiza e substitui elementos no documento ativo. 


Pesquisar registro de projeto localiza e substitui elementos em arquivos listados no Registro de 

. q . 8! 
projeto. Para mais informações, consultar “Gerenciamento de uma pesquisa com o Registro de 
projeto” na página 415. 


Pesquisar arquivos localiza e substitui elementos em múltiplos arquivos. Se esta opção ainda 
não estiver selecionada no menu pop-up Pesquisar, a sua escolha abrirá uma caixa de diálogo na 
qual é possível escolher os arquivos a serem pesquisados. Se Pesquisar arquivos já estiver 
selecionado no menu pop-up Pesquisar, depois que a operação de pesquisa for iniciada com um 
clique em Localizar, Substituir ou Substituir tudo, será oferecida a opção de escolher os 
arquivos para pesquisa. 
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4 No menu pop-up Localizar, escolher um atributo a pesquisar. As opções do painel mudam em 
função da seleção. 


5 Definir as opções para o atributo Localizar selecionado. 
6 Escolher uma operação localizar-e-substituir: 


Localizar localiza a próxima ocorrência do elemento. Os elementos encontrados aparecem 
selecionados no documento. 


Substituir substitui um elemento localizado pelo conteúdo da opção Alterar para. 


Substituir tudo localiza e substitui todas as ocorrências de um elemento localizado em toda a 
faixa de pesquisa. 
Nota: A substituição de objetos em múltiplos arquivos salva esses arquivos automaticamente; não é possível 


reverter a alteração com Editar > Desfazer. Para mais informações, consultar “Localização e substituição durante 
um processo em lote” na página 411. 


Definição de opções para localizar e substituir em múltiplos arquivos 
Durante uma operação localizar-e-substituir em múltiplos arquivos, é possível determinar como 


vários arquivos abertos devem ser tratados depois da pesquisa. 


Para salvar, fechar e fazer backup de cada arquivo depois de pesquisado: 


1 Escolher Opções de substituição no menu Opções do painel Localizar e substituir. 


v Adicionar arquivos ao registro de projeto 


Opções de substituição... 


[ESTE 


Ajuda 


Fechar grupo de painéis 

autos 

[C] Palavra inteira 

[C] Coincidir maiúsc.tminúsc. 
[ ] Espressões regulares 


Substituir tudo 


2 Escolher Salvar e fechar arquivos para salvar e fechar cada arquivo após a operação localizar-e- 
substituir. 


Apenas os documentos originalmente ativos permanecerão abertos. 


Nota: Se Salvar e fechar estiver desativado e um grande número de arquivos for processado em lote, o 
Fireworks poderá ficar sem memória e anular o processo em lote. 
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3 No menu pop-up Backups, escolher uma das seguintes opções: 


Sem backups localiza e substitui sem fazer backup dos arquivos originais. Os arquivos 
alterados substituem os originais. 


Substituir backups existentes cria e armazena apenas uma cópia de backup de cada arquivo 
alterado durante uma operação localizar-e-substituir. A execução de outras operações localizar- 
e-substituir sempre substitui a cópia de backup pelo arquivo original anterior. As cópias de 
backup são armazenadas em uma subpasta chamada Arquivos originais. 


Backups incrementais salva todas as cópias de backup de arquivos alterados durante uma 
operação localizar-e-substituir. Os arquivos originais são movidos para uma subpasta Arquivos 
originais dentro da pasta atual e um número incremental é anexado a cada nome de arquivo. A 
execução de operações localizar-e-substituir adicionais copia o arquivo original para a pasta 
Arquivos originais e adiciona o número mais alto seguinte ao nome do arquivo. Por exemplo, 
no caso de um arquivo chamado Drawing.png, na primeira execução de uma operação 
localizar-e-substituir, o arquivo de backup receberá este nome: Drawing-1.png. Na segunda 
execução de uma operação localizar-e-substituir, o arquivo de backup receberá o nome 
Drawing-2.png e assim por diante. 


4 Clicar em OK. 


Localização e substituição de texto 
É fácil pesquisar e substituir texto com o Fireworks. Há várias opções para refinar a pesquisa de 
modo a coincidir maiúsculas e minúsculas ou localizar palavras inteiras ou partes delas. 
Para pesquisar e substituir palavras, frases e sequências de texto: 
1 Escolher Localizar texto no menu pop-up Localizar do painel Localizar e substituir. 
2 Digitar o texto a ser pesquisado na caixa de texto Localizar. 


3 Digitar o texto de substituição na caixa Alterar para. 


Pesquisar documento 


Localizar testo 


[|] Palavra inteira 
[C] Coincidir maiúse.tminúse. 
[ ] Expressões regulares 


Localizar 


| Substituir tudo 


4 Se desejar, escolher opções que definam a pesquisa com mais detalhes: 


Palavra inteira localiza o texto apenas da mesma forma que ele aparece na opção Localizar, não 
como parte de qualquer outra palavra. 


Coincidir maiúsc./minúsc. diferencia letras maiúsculas de minúsculas na pesquisa de texto. 


Expressões regulares coincide partes de palavras ou números condicionalmente durante uma 
pesquisa. 
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Localização e substituição de fonte 


Também há maneiras de localizar e substituir rapidamente fontes em documentos do Fireworks. 


Para pesquisar e substituir fontes em um ou mais documentos do Fireworks: 
1 Escolher Localizar fonte no menu pop-up Localizar do painel Localizar e substituir. 


2 Escolher a fonte e o estilo de fonte a serem localizados. 


Dica: Existe a possibilidade de limitar a pesquisa por tamanhos de ponto máximo e mínimo. 


3 Especificar a fonte, o estilo da fonte e o tamanho do ponto a serem usados como substituição 
na área Alterar para. 


Pesquisar documento 


Localizar fonte 


Arial 


Qualquer estilo v 


Min:f1 Mán:/999 | 


Alterar para: 


Mesma fonte 


Mesmo estilo 


Localizar 
| Substituir tudo 


Localização e substituição de cor 
É possível localizar todas as ocorrências de uma cor específica em documentos do Fireworks e, em 
seguida, alterá-la para outra cor. 
Para pesquisar e substituir cores em documentos do Fireworks: 


1 Escolher Localizar cor no menu pop-up Localizar. 


Pesquisar documento 


Localizar cor 


Localizar: 


Alterar para: = 


Aplicar a: 


Traços e preenchimentos 


Localizar 
Substituir tudo 
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2 Escolher um item no menu pop-up Aplicar a, para determinar como as cores encontradas na 
operação localizar-e-substituir serão aplicadas: 


Preenchimentos e traços localiza e substitui cores de preenchimento e traço. 
Todas as propriedades localiza e substitui cores de preenchimento, traço e efeito. 


Preenchimentos localiza e substitui uma cor de preenchimento, exceto dentro de 
preenchimentos com padrão. 


Traços localiza e substitui apenas cores de traço. 


Efeitos localiza e substitui apenas cores de efeito. 


Localização e substituição de URL 
Além de palavras, tipos e cores, o Fireworks localiza e substitui URLs atribuídos a elementos 
interativos dos documentos. 
Para pesquisar e substituir URLs atribuídos a objetos da Web: 
1 Escolher Localizar URL no menu pop-up Localizar do painel Localizar e substituir. 
2 Digitar o URL a ser pesquisado na caixa de texto Localizar. 


3 Digitar o URL de substituição na caixa de texto Alterar para. 


Pesquisar documento 
Localizar URL 


Localizar: 


http:Hwww.myurlcom 


Alterar para: 


http:#www.newurl.com 


[C] Palavra inteira 

[C] Coincidir maiúse.tminúse. 

d Expressões regulares 

L tocaiza ) 

C Substiuirtudo 


4 Se desejar, escolher opções que definam a pesquisa com mais detalhes: 


Palavra inteira localiza o texto apenas da mesma forma que ele aparece na opção Localizar, não 
como parte de qualquer outra palavra. 


Coincidir maiúsc./minúsc. diferencia letras maiúsculas de minúsculas na pesquisa de texto. 
Expressões regulares coincide partes de palavras ou números condicionalmente durante uma 
pesquisa. 

Localização e substituição de cor não-Websafe 


Uma cor não-Websafe é uma cor não incluída na paleta de cores Web216. Uma cor será Websafe 
se parecer sempre a mesma cor nas plataformas Macintosh e Windows. Para mais informações 
sobre cores Websafe, consultar “Otimização de GIF, PNG, TIFF, BMP e PICT” na página 334. 
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Para pesquisar todas as cores não-Websafe e substitui-las por cores Websafe: 


Escolher Localizar não-Web2 16 no menu pop-up Localizar do painel Localizar esubstituir. 


Pesquisar documento 


Localizar não-web216 


Localizar: 
Cores não-websate 


Alterar para: 


websafe mais próxima 


Aplicar a: 


Traços e preenchimentos 


Localizar 


Substituir tudo 


Nota: Localizar não-Web216 não localiza nem substitui pixels dentro de objetos de imagem. 


Processo em lote 


O processo em lote é uma maneira conveniente de converter automaticamente um grupo de 
arquivos gráficos. Estas são as opções de processo em lote: 


e Converter uma seleção de arquivos em outro formato. 


e Converter uma seleção de arquivos no mesmo formato com configurações de otimização 
diferentes. 


e Colocar em escala arquivos exportados. 


è Localizar e substituir texto, cores, URLs, fontes e cores não-Web216. 


* Renomear grupos de arquivos adicionando um prefixo ou sufixo. 


* Executar comandos em uma seleção de arquivos. 


Para processar arquivos em lote: 


1 Escolher Arquivo > Processo em lote. 


Examinar: | © images 


dm pic01 jpg 
dm pic2.jpg 
dm pic03.jpg 
mm pic04.jpg 
dm picos.jpg 
8) pic06. jpg 


< 


di picO7.jpg 
mm pic08.jpg 
dm pic09.jpg 
mm piciO.jpg 
mi piclL.ipg 
m piciZ.jpg 


{v 


di pici3.jpg 
Æ pic14.jpg 
dm pic15.jpg 
mi pic16.ipa 
dm pici7.ipg 
6 pic18.jpg 


) É Eº E 


am piciS.jpg 
Mm pic20.ipg 
m pic21.jpg 
mi pic22.jpg 
mi pic23.jpg 
m pic24.jpg 


Nome do arquivo: 


Arquivos do tipo: 


JPEG (Cipg”.jpe:”.jpeg) 


( Próximo 
w | | Cancelar 


Adicionar 


[Adicionar tudo 


Remover 


Incluir arquivos do registro de projeto 
Incluir arquivos atuais abertos 


Visualização 
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2 Escolher os arquivos a serem processados. É possível escolher arquivos de pastas diferentes ou 
agrupá-los por tipo de arquivo. 


Adicionar adiciona arquivos e pastas selecionados à lista de arquivos para processo em lote. Se 
uma pasta for selecionada, todos os arquivos válidos e legíveis dentro dela serão adicionados ao 
processo em lote. 


Nota: Arquivos válidos são arquivos que foram criados, nomeados e salvos. Se a última versão não for salva, o 
usuário será instruído a salvá-la e continuar o processo em lote. Se ele não salvar o arquivo, todo o processo em lote 
será concluído. 


Adicionar todos adiciona todos os arquivos válidos da pasta selecionada no momento à lista de 
arquivos para processo em lote. 


Remover remove arquivos ou pastas selecionados da lista de arquivos para processo em lote. 


3 Escolher Incluir arquivos do registro de projeto, para adicionar todos os arquivos do Registro 
de projeto. 


Esses arquivos não aparecem na lista de arquivos para processo em lote, mas serão incluídos no 
processo. 


4 Escolher Incluir arquivos atuais abertos, para adicionar todos os arquivos abertos no momento. 


Esses arquivos não aparecem na lista de arquivos para processo em lote, mas serão incluídos no 
processo. 


5 Clicar em Próximo e seguir um destes procedimentos, ou ambos: 


Processo em lote 


Opções de lote: Incluir em lote: 


| Renomear 


Escala | 
Localizar e substituir | 


Renomear < Remover 


| E] Comandos 


Exportar: 


Configuração: [ GIF webSnaps ul 


Próximo > Cancelar 


* Para adicionar uma tarefa ao lote, selecioná-la na lista Opções de lote e clicar em Adicionar. 
Cada tarefa pode ser adicionada apenas uma vez. Para mais informações sobre como adicionar 
comandos, consultar “Execução de um comando com um processo em lote” na página 412. 


* Para reorganizar a lista, selecionar a tarefa na lista Incluir em lote e clicar nos botões de seta 
acima e abaixo. 


ERA 


Nota: A ordem em que as tarefas aparecem na lista Incluir em lote é a ordem em que elas serão executadas 
durante o processo em lote, com a exceção de Exportar, que sempre é a última a ser executada. 
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6 Selecionar uma tarefa na lista Incluir em lote, para exibir opções extras para essa tarefa. 
7 Escolher configurações para cada opção, se necessário. 
Para remover uma tarefa do lote, selecioná-la na lista Incluir em lote e clicar em Remover. 
8 Clicar em Próximo. 
9 Escolher opções para salvar arquivos processados: 


Mesmo local do arquivo original salva o arquivo no mesmo local que o arquivo de origem e 
substitui o arquivo de origem se os nomes dos arquivos forem os mesmos e estiverem no 
mesmo formato. 


Personalizar local permite escolher um local para salvar os arquivos processados. 
10 Selecionar Backups a fim de escolher opções de backup para os arquivos originais. 


É sempre mais seguro fazer backup dos arquivos. Para mais informações, consultar 
“Especificação do local de saída do processo em lote” na página 412. 


11 Clicar em Salvar script a fim de salvar as configurações do processo em lote para uso futuro. 
Para mais informações, consultar “Salva de um processo em lote como script” na página 413. 


12 Clicar em Lote para executar o processo em lote. 


Alteração de uma configuração de otimização com um processo em lote 


A opção Exportar da caixa de diálogo Processo em lote permite alterar as configurações de 
otimização de arquivo. 


Processo em lote 


Opções de lote: Incluir em lote: 


Eta 
Escala 
Localizar e substituir 


Renomear < Remover 


EB Comandos 


Exportar: 


Configuração: lar webSnap 128 


Usar configurações de cada ard 
Personalizar... 


GIF web 216 

GIF webSnap 256 

GIF WebSnap 128 

GIF Adaptive256 

JPEG - Melhor qualidade 
JPEG - menor arquivo 

Animated websnap 128 


Para definir as configurações de exportação para um processo em lote: 
1 Escolher Exportar na lista Opções de lote e clicar em Adicionar. 
2 No menu pop-up Configurações, escolher uma das seguintes opções e clicar em OK: 


è Escolher Usar configurações de cada arquivo para manter as configurações de exportação 
anteriores de cada arquivo durante o processo em lote. Por exemplo, durante o processo em lote 
de uma pasta de GIFs e JPEGs, os arquivos resultantes ainda serão GIFs e JPEGs e as 
configurações originais de paleta e compactação serão usadas na exportação de cada arquivo. 
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è Escolher Personalizar ou clicar em Editar para alterar as configurações na caixa de diálogo 
Visualizar exportação. 


* Escolher uma configuração de exportação predefinida como GIF Web 216 ou JPEG - Melhor 
qualidade. Todos os arquivos serão convertidos nessa configuração. 


3 Clicar em Próximo para continuar o processo em lote. 
Para informações sobre como concluir o processo em lote, consultar “Processo em lote” na 
página 407. 

Como colocar uma imagem gráfica em escala com um processo em lote 
A opção Escala da caixa de diálogo Processo em lote permite alterar a altura e a largura das 
imagens que estão sendo exportadas. 

Para definir opções de escala para arquivos processados em lote: 
1 Escolher Escala na lista Opções de lote e clicar em Adicionar. 
2 No menu pop-up Escala, escolher uma opção: 

Não escalonar exporta os arquivos inalterados. 


Escalonar para dimensionar coloca imagens em escala com a largura e altura exatas 
especificadas. 


Escalonar para encaixar na área ajusta as imagens em proporção à faixa especificada de largura 
e altura máximas. 


Dica: Use Escalonar para encaixar na área a fim de converter um grupo de imagens em miniaturas com tamanho 
uniforme. 


Escalonar pela porcentagem coloca imagens em escala por porcentagem. 
3 Clicar em Próximo para continuar o processo em lote. 


Para informações sobre como concluir o processo em lote, consultar “Processo em lote” na 


página 407. 


410 Capítulo 17 


Localização e substituição durante um processo em lote 


A opção Localizar e substituir da caixa de diálogo Processo em lote localiza e substitui texto, 
fontes, cores ou URLs em botões, pontos ativos ou fatias. 


Substituição em lote 


Localizar URL 


Localizar: 


Alterar para: 


[C] Palavra inteira 
Coincidir maiúsc.tminúsc. 
[ | Expressões regulares 


Estas opções aplicam-se a arquivos de objeto, como 
Fireworks e FreeHand, mas não a arquivos apenas de 
imagens como GIF ou JPEG. 


Atualizar registro de projeto 


Substituição em lote afeta apenas os seguintes formatos de arquivo: Fireworks PNG, Illustrator, 
FreeHand e CorelDRAW. Substituição em lote não afeta GIFs e JPEGs. 


Para selecionar atributos a localizar e substituir durante um processo em lote: 


1 
2 


Escolher Localizar e substituir na lista Opções de lote e clicar em Adicionar. 
Clicar em Editar. 


Selecionar o tipo de atributo a localizar e substituir no menu pop-up Localizar: texto, fonte, 


cor, URL ou não-Web216. 
Digitar o elemento específico a ser localizado na caixa de texto Localizar. 


Digitar, na caixa de texto Alterar para, o elemento específico para substituir o item localizado. 


Dica: Escolher Atualizar registro de projeto para adicionar arquivos alterados ao Registro de projeto, de modo a 
facilitar sua localização posterior. 


Clicar em OK para armazenar as configurações de Localizar e substituir. 
Clicar em Próximo para continuar o processo em lote. 


Para informações sobre como concluir o processo em lote, consultar “Processo em lote” na 
página 407. Para mais informações sobre as opções de Localizar e substituir, consultar 
“Localizar e substituir” na página 402. 


Alteração de um nome de arquivo com um processo em lote 


A opção Renomear da caixa de diálogo Processo em lote permite alterar os nomes dos arquivos 
que estão sendo processados. 


Para definir as opções de nomes para arquivos processados em lote: 


1 
2 


Escolher Renomear na lista Opções de lote e clicar em Adicionar. 
Escolher uma opção no menu pop-up Renomear. 


Nome original mantém os nomes de arquivo inalterados. 
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Adicionar prefixo permite adicionar texto ao início do nome do arquivo. Por exemplo, se 
digitar “night ”, o arquivo Sunrise.gif será renomeado para night Sunrise.gif quando for 
processado em lote. 


Adicionar sufixo permite adicionar texto ao final do nome do arquivo antes da extensão. Por 
exemplo, se digitar “ day”, o arquivo Sunset.gif será renomeado para Sunset day.gif quando 
for processado em lote. 


3 Clicar em Próximo para continuar o processo em lote. 
Para informações sobre como concluir o processo em lote, consultar “Processo em lote” na 
página 407. 
Execução de um comando com um processo em lote 


A opção Comandos da caixa de diálogo Processo em lote permite executar comandos JavaScript 
em arquivos. 


Para definir opções de comando para arquivos processados em lote: 


1 Clicar no sinal de mais (+) (Windows) ou no triângulo (Macintosh) ao lado da opção 
Comandos na lista Opções de lote, para exibir os comandos disponíveis. 


2 Selecionar um comando e clicar em Adicionar para adicioná-lo à lista Incluir em lote. 


Nota: Esses comandos não podem ser editados. 


3 Clicar em Próximo para continuar o processo em lote. 


Para informações sobre como concluir o processo em lote, consultar “Processo em lote” na 
página 407. Para mais informações sobre como criar comandos, consultar “Scripts com o 
painel Histórico” na página 416. 


Nota: Alguns comandos não funcionam durante um processo em lote. Escolha comandos que funcionem no 
documento sem a necessidade de selecionar qualquer objeto. 


Especificação do local de saída do processo em lote 


Depois de escolher todas as opções de lote na caixa de diálogo Processo em lote, será necessário 
escolher as opções para salvar os arquivos. É possível salvar cópias de backup dos arquivos 
originais de um processo em lote. As cópias de backup dos arquivos são colocadas em uma 
subpasta Arquivos originais, na mesma pasta que todos os arquivos originais. 


Processo em lote 


Salvar arquivos: 
Saída em lote: (2) Mesmo local do arquivo original 


(O Personalizar local 


Backups: © Substituir backups existentes 
(O) Backups incrementais 


< Voltar Cancelar 
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Para fazer backup de arquivos processados em lote: 


1 


Escolher um local de saída do processo em lote. 


2 Escolher Backups para definir as opções de backup. 


3 


Escolher como deseja fazer o backup dos arquivos: 
Substituir backups existentes substitui o arquivo de backup anterior. 


Backups incrementais mantém cópias de todos os arquivos de backup. Quando for executado 
um novo processo em lote, um número será anexado ao final do nome do arquivo da nova 
cópia de backup. 

Nota: Se Backup for desselecionado, o processo em lote no mesmo formato de arquivo substituirá o arquivo 


original, se o nome for o mesmo. Entretanto, o processo em lote em um formato diferente de arquivo criará um 
novo arquivo e não moverá nem excluirá o arquivo original. 


Clicar em Lote para concluir o processo em lote, ou em Voltar para retornar à caixa de diálogo 
Processo em lote. 


Salva de um processo em lote como script 


É possível salvar as configurações do processo em lote como script ou comando para recriar 
facilmente o processo em lote no futuro. Depois de escolhidas todas as opções de lote na caixa de 
diálogo Lote, serão apresentadas as opções para salvar os arquivos. 


Para criar um script em lote: 


1 
2 


Clicar em Salvar script para criar um script em lote. 

Digitar um nome e um destino para o script. 

Clicar em Salvar. 

Nota: Se o script for salvo na pasta Comandos no disco rígido, ele será adicionado ao menu Comandos do 


Fireworks. A localização da pasta Comandos varia de acordo com o sistema operacional. Para mais 
informações, consultar “Como trabalhar com arquivos de configuração” na página 427. 


Para executar um script em lote: 


1 


N 


Seguir um destes procedimentos: 

No Fireworks, escolher Comandos > Executar script. 

Fora do Fireworks, clicar duas vezes no nome do arquivo de script no disco rígido. 
Selecionar um script e clicar em Abrir. 

Escolher os arquivos a serem processados com o script: 

Arquivos atuais abertos processa todos os documentos abertos. 


Registro de projeto (Todos os arquivos) processa todos os arquivos listados no painel Registro 
de projeto. 


Registro de projeto (Arquivos selecionados) processa os arquivos selecionados no momento no 
painel Registro de projeto. 


Personalizar permite selecionar os arquivos a serem processados. 
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Nota: Clicar no botão de reticências (...) ao lado do menu pop-up Arquivos a processar para selecionar arquivos 
a processar. 


Arquivos a processar E3 


Arquivos a processar: 


Arquivos atuais abertos Cancelar 


4 Clicar em OK. 


Para mais informações sobre como escolher arquivos, consultar “Processo em lote” na página 407. 


Execução de script arrastando e soltando 


Se o usuário tiver um processo em lote que repita com fregiiência, ele deverá salvá-lo como um 
script e, em seguida, arrastar esse script da unidade de disco rígido até o ícone do Fireworks em 
seu espaço de trabalho para executar o processo em lote. O aplicativo Fireworks inicia e executa 
esse script. 

Para executar scripts arrastando e soltando: 

1 Salvar um script. 

2 Seguir um destes procedimentos: 

è Arrastar o ícone do arquivo de script até o ícone do Fireworks no espaço de trabalho. 


e Arrastar o ícone do arquivo de script até um documento aberto do Fireworks. 


Nota: Arrastar vários arquivos de script e vários arquivos gráficos para o Fireworks processa os arquivos 
gráficos várias vezes, uma vez para cada script. 


Uso do Registro de projeto 


O Registro de projeto ajuda a rastrear e controlar as alterações feitas em múltiplos arquivos com 
Localizar e substituir ou durante o processo em lote. Os documentos alterados por Localizar e 
substituir são registrados no Registro de projeto. 


pic08.jpg 
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Gerenciamento de uma pesquisa com o Registro de projeto 


O usuário pode utilizar o Registro de projeto para navegar pelos arquivos selecionados, exportar 
arquivos selecionados com suas últimas configurações de exportação ou selecionar arquivos a 
serem processados em lote. O Registro de projeto registra cada documento alterado e exibe a 
moldura do documento que contém a alteração, assim como a data e hora da alteração. 


O usuário pode adicionar arquivos manualmente ao Registro de projeto para rastrear os arquivos 
que pretende editar com fregiiência. 

Para adicionar manualmente arquivos ao Registro de projeto: 

1 Escolher Janela > Registro de projeto. 

2 Escolher Adicionar arquivos ao registro no menu Opções do Registro de projeto. 

3 Navegar até o arquivo que deseja adicionar. 

4 Selecionar o arquivo. 


5 Clicar em Abrir. 


Para abrir os arquivos listados no Registro de projeto, seguir um destes procedimentos: 
e Clicar duas vezes no arquivo. 


è Selecionar o arquivo e clicar em Abrir. 


Para remover entradas do Registro de projeto: 

Selecionar uma ou mais entradas e escolher Limpar seleção ou Limpar tudo no menu Opções do 
painel Registro de projeto. 

Para exportar um arquivo listado no Registro de projeto com suas últimas configurações de 
exportação: 


Selecionar o arquivo e escolher Exportar novamente. 


Exibição e impressão do Registro de projeto 


A versão mais recente do Registro de projeto é armazenada como um arquivo HTML no disco 
rígido. Sua localização exata varia de acordo com o sistema operacional. Para mais informações, 
consultar “Como trabalhar com arquivos de configuração” na página 427. 


Para exibir ou imprimir o Registro de projeto: 


Abrir o arquivo Project Log.htm em um navegador. 


Extensão dos recursos do Fireworks 


Nunca foi tão fácil estender os recursos do Fireworks. O Fireworks oferece várias maneiras 
diferentes de criar comandos personalizados que aprimoram seus recursos. 


O Extension Manager permite instalar e gerenciar extensões que estendem a funcionalidade do 
Fireworks. Uma outra opção é escrever código JavaScript e usá-lo como um comando 
personalizado no Fireworks. Os filmes Flash SWF também podem ser usados como comandos 
personalizados no Fireworks. Além disso, o painel Histórico do Fireworks oferece uma interface 
fácil de usar que permite criar comandos personalizados a partir de várias tarefas gravadas. 


Automatização de uma tarefa repetitiva 415 


Depois de instaladas, as extensões são adicionadas ao menu Comandos do Fireworks, o mesmo 
acontecendo com os comandos personalizados que são criados. 


Nota: Se os comandos forem armazenados como um arquivo SWF na pasta Command Panels no disco rígido, eles 
serão disponibilizados como painéis no menu Janela. Para mais informações, consultar “Sobre a criação de scripts 
com arquivos do Flash SWF” na página 418. 


Uso do Macromedia Extension Manager 


Uma extensão é um script de comando, biblioteca, filtro, padrão ou textura que pode ser 
adicionado a um aplicativo Macromedia para aprimorar seus recursos. O Fireworks inclui o 
Macromedia Extension Manager, que instala, gerencia e exclui extensões com facilidade. Durante 
a instalação, o Fireworks inclui um conjunto de extensões padrão no menu Comandos. 


O Extension Manager também pode agrupar extensões personalizadas e enviá-las ao Macromedia 
Exchange para Fireworks. O Exchange permite o compartilhamento de extensões entre usuários do 
Fireworks. Para saber mais sobre o Macromedia Exchange, visite http://www.macromedia.com/br/ 
exchange/. 


As extensões do Fireworks são armazenadas na pasta Configuration/Comandos dentro da pasta do 
aplicativo Fireworks no disco rígido. Para mais informações sobre a localização da pasta 
Comandos, consultar “Como trabalhar com arquivos de configuração” na página 427. 


Nota: Os comandos criados pelo usuário, como aqueles salvos através do painel Histórico, e algumas extensões de 
terceiros são tratados de formas diferentes. Eles são armazenados na subpasta Comandos na pasta de 
configuração de cada usuário. Para mais informações, consultar “Como trabalhar com arquivos de configuração” na 
página 427. 


Para mais informações sobre como usar o Extension Manager, consultar Uso do Macromedia 
Extension Manager, acessível a partir do menu Ajuda do Extension Manager. 


Scripts com o painel Histórico 


O painel Histórico grava uma lista das etapas executadas durante o trabalho no Fireworks. Cada 
etapa é armazenada em uma linha separada do painel Histórico, começando com a mais recente. 
Por padrão, o painel lembra de 20 etapas. Entretanto, é possível alterar esse valor a qualquer 
momento. 


Criação de um comando 


O Fireworks oferece a opção de salvar grupos de etapas no painel Histórico como um comando 
que possa ser reutilizado. Além disso, ele executa os comandos salvos em qualquer um de seus 
respectivos documentos. Esses comandos não são específicos do documento. 


Os comandos salvos são armazenados como arquivos JSF na pasta Comandos específica do 
usuário no disco rígido. A localização exata dessa pasta varia de acordo com o sistema operacional. 
Para mais informações, consultar “Como trabalhar com arquivos de configuração” na página 427. 
Para salvar etapas como um comando: 


1 Escolher as etapas a salvar como um comando: 


e Clicar em uma etapa, manter pressionada a tecla Shift e clicar em outra etapa para selecionar 
uma faixa de etapas a serem salvas como um comando. 


* Manter pressionada a tecla Control (Windows) ou Command (Macintosh) e clicar para 
selecionar etapas não contíguas. 
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2 Clicar no botão Salvar como comando na parte inferior do painel Histórico. 
3 Digitar um nome para o comando e clicar em OK. 


O comando aparece no menu Comandos. 


Para desfazer ou refazer etapas usando o painel Histórico: 


e Arrastar o Marcador do Desfazer para cima no painel até atingir a última etapa que deseja 
desfazer ou refazer. 


e Clicar na trilha do Marcador do Desfazer à esquerda do painel Histórico. 


Nota: Etapas desfeitas permanecem no painel Histórico realçadas em cinza. 


Para alterar o número de etapas no painel Histórico: 
1 Escolher Editar > Preferências. 
Nota: No Mac OS X, escolher Fireworks > Preferences. 
2 Alterar Etapas de desfazer para o número de etapas que deseja que o painel Histórico registre. 


Nota: Etapas adicionais requerem mais memória do computador. 


Para limpar todas as etapas do painel Histórico: 
Escolher Limpar histórico no menu Opções do painel Histórico, 
para liberar espaço na memória e em disco. 


Nota: Limpar ações do painel Histórico remove a possibilidade de Desfazer edições. 


Execução de um comando 

É possível executar comandos gravados ou uma seleção de ações no painel Histórico a qualquer 
momento. 

Para reproduzir um comando salvo: 

1 Se necessário, selecionar um ou mais objetos. 


2 Escolher o comando no menu Comandos. 


Para reproduzir uma seleção de etapas: 

1 Selecionar um ou mais objetos. 

2 Escolher as etapas no painel Histórico. 

3 Clicar no botão Reproduzir na parte inferior do painel Histórico. 
As etapas marcadas com um X não podem ser repetidas e não serão reproduzidas. Linhas 
separadoras indicam que foi selecionado um objeto diferente. Comandos criados a partir de 
etapas que ultrapassam uma linha separadora podem gerar resultados imprevisíveis. 

Para aplicar etapas selecionadas a objetos em vários documentos: 

1 Selecionar uma faixa de etapas. 

2 Clicar no botão Copia etapas na área de transferência, na parte inferior do painel Histórico. 


3 Selecionar um ou mais objetos em qualquer documento do Fireworks. 
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4 Escolher Editar > Colar. 


Para repetir a última etapa: 


Escolher Editar > Repetir Script de comando. 


Sobre a criação de scripts com JavaScript 


Para reduzir o tédio de algumas tarefas repetitivas, o usuário pode escrever seu próprio código em 
JavaScript em um editor de texto para executar no Fireworks. Ele pode controlar quase todos os 
comandos ou configurações do Fireworks com JavaScript. 


O Macromedia Dreamweaver também usa JavaScript. É possível escrever scripts que controlem o 
Fireworks de dentro do Dreamweaver. 


Para documentação sobre a API de JavaScript, consultar Extending Fireworks MX, disponível 
como PDF no CD de instalação do Macromedia Fireworks MX. 


Sobre a criação de scripts com arquivos do Flash SWF 


Com o Flash, é possível criar filmes SWF que contêm código JavaScript. Esses filmes podem ser 
usados como comandos do Fireworks, acessíveis a partir do menu Comandos do Fireworks. 


Existe até mesmo a opção de criar um filme SWF e usá-lo como um painel do Fireworks, acessível 
a partir do menu Janela. O painel Alinhar do Fireworks é um exemplo de um filme do Flash 
importado como um painel. 


Os filmes SWF que são usados como comandos são armazenados na pasta Comandos no disco 
rígido e os filmes SWF que são usados como painéis são armazenados na pasta Command Panels. 
A localização exata dessas pastas varia de acordo com o sistema e depende de o usuário querer 
disponibilizar os comandos personalizados apenas para uso próprio ou para todos os usuários que 
fizerem login no sistema. Para mais informações sobre localizações de pastas, consultar “Como 
trabalhar com arquivos de configuração” na página 427. 


Para instruções mais detalhadas sobre como criar comandos a partir de filmes do Flash SWF, 
consultar Extending Fireworks MX, disponível como PDF no CD de instalação do Macromedia 
Fireworks MX. 


Gerenciamento de um comando 
É possível renomear ou excluir comandos que aparecem no menu Comandos. 


A opção Gerenciar comandos salvos do Fireworks permite renomear e excluir os comandos 
criados por qualquer usuário. Outros comandos e extensões que foram instalados com o 
Fireworks ou que foram transferidos por download e instalados a partir do site do Macromedia 
Exchange na Web devem ser gerenciados com o Extension Manager. 

Para renomear um comandos personalizado que criar: 

1 Escolher Comandos > Gerenciar comandos salvos. 


2 Selecionar o comando. 


3 Clicar em Renomear, digitar um novo nome e clicar em OK. 
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Para excluir um comando que criou, seguir um destes procedimentos: 


e No Fireworks, escolher Comandos > Gerenciar comandos salvos. Em seguida, selecionar o 
comando e clicar em Excluir. 


e No disco rígido, excluir o arquivo JSF do comando da pasta Comandos específica do usuário. 
A localização exata dessa pasta varia de acordo com o sistema operacional. Para mais 
informações, consultar “Como trabalhar com arquivos de configuração” na página 427. 


Para renomear ou excluir um comando incluído no Fireworks ou transferido por download a partir 
do Macromedia Exchange: 
Escolher Comando > Gerenciar extensões. 


O Extension Manager é exibido. Para informações sobre como gerenciar extensões, consultar a 
Ajuda do Extension Manager. 


Edição ou personalização de um script de comando 


Scripts de comando são salvos como JavaScript. Se conhecer JavaScript, o usuário poderá abrir e 
editar comandos em qualquer editor de texto, como o Bloco de notas (Windows) ou Simple Text 
(Macintosh). 

Para editar um comando usando JavaScript: 


1 No espaço de trabalho, navegar até a pasta Comandos ou Command Panels apropriada no 
disco rígido. 
Nota: A localização exata dessas pastas varia de acordo com o sistema e depende de o comando estar 
disponível apenas para seu perfil de usuário ou para todos os usuários. Para mais informações, consultar “Como 
trabalhar com arquivos de configuração” na página 427. 


2 Abrir o arquivo de script desejado em um editor de texto e modificar o código JavaScript. 


3 Salvar e fechar o script. 


Para editar ações selecionadas no painel Histórico usando JavaScript: 

1 No Fireworks, selecionar uma faixa de etapas no painel Histórico. 

Clicar no botão Copia etapas na área de transferência, na parte inferior do painel Histórico. 
Criar um novo documento em um aplicativo de edição de texto. 

Colar as etapas no novo documento de texto. 

Modificar as etapas da maneira desejada. 


Salvar e fechar o script. 


“o qa OMN 


Copiar o script para a pasta Comandos no disco rígido. 


Nota: A localização exata dessa pasta varia de acordo com o sistema e depende de o comando estar disponível 
apenas para seu perfil de usuário ou para todos os usuários. Para mais informações, consultar “Como trabalhar 
com arquivos de configuração” na página 427. 


O novo comando estará disponível no menu Comandos na próxima vez que o usuário iniciar o 
Fireworks. 
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CAPÍTULO 18 
Preferências e atalhos de teclado 


As configurações de preferência do Macromedia Fireworks permitem controlar a aparência geral 
da interface do usuário, assim como a edição e os aspectos de pasta. Além disso, o Fireworks 
permite personalizar os atalhos de teclado. Isto é, o usuário pode personalizar os atalhos e 
padronizá-los para usar em seus programas de software preferidos. 


Configuração de preferências 


O Fireworks tem configurações de preferência que controlam a aparência geral da interface do 
usuário, além de opções relacionadas a recursos específicos, como cores padrão, opções de 
ferramentas, locais das pastas e conversões de arquivo. 

Para definir preferências: 


1 Selecionar Editar > Preferências. 


Nota: No Mac OS X, selecionar Fireworks > Preferências. 


2 Selecionar o grupo de preferências que deseja modificar: Geral, Edição, Iniciar e editar, Pastas 
ou Importar. 


3 Fazer as alterações e clicar em OK, 


Preferências gerais 
As opções a seguir estão na guia Geral de preferências: 


Etapas de desfazer define as etapas de desfazer/refazer em um número entre O e 999. Essa 
configuração se aplica ao comando Editar > Desfazer e ao painel Histórico. Um grande número do 
recurso desfazer pode aumentar a quantidade de memória que o Fireworks necessita. Você deve 
reiniciar o Fireworks para a alteração dessa configuração entrar em vigor. 


Padrões de Cores define os padrões para traços de pincel, preenchimentos e caminhos de realce. 
As opções Traço e Preenchimento não alteram automaticamente as cores exibidas nas caixas de 
cores do painel Ferramentas. Elas permitem alterar as cores padrão especificadas pelo botão 
Definir traço padrão/cores de preenchimento no painel Ferramentas. 


Interpolação define um dos quatro diferentes métodos de escala usados pelo Fireworks para 
interpolar pixels quando as imagens são colocadas em escala: 


e A interpolação bicúbica proporciona, na maioria das vezes, a melhor e mais precisa qualidade 
no resultado e é o método de escala padrão. 


e A interpolação bilinear proporciona resultados mais precisos do que a interpolação suave, mas 
não tanto quanto a bicúbica. 
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e A interpolação suave, usada no Fireworks 1, oferece um desfoque suave e elimina os detalhes 
precisos. Este método é útil quando outros produzem artefatos indesejados. 


* A interpolação Vizinho mais próximo resulta em bordas dentadas e contrastes aguçados sem 
desfoque. O efeito é semelhante ao de aumentar ou reduzir uma imagem usando a ferramenta Zoom. 


Espaço de trabalho: Mostrar ícones de guias não está selecionado por padrão. Permite exibir ou 
ocultar os ícones gráficos nas guias de painel, que estavam visíveis nas versões anteriores do Fireworks. 
Essa opção também afeta a exibição do Mini-iniciador na base de cada janela do documento. 


Salvar arquivos: Adicionar ícones de visualização (somente Macintosh) permite exibir ou ocultar 
miniaturas de arquivos PNG do Fireworks no seu disco rígido. Se a seleção desta opção for 
cancelada o ícone tradicional do Fireworks usado para arquivos PNG do Fireworks será exibido. 
Esta opção entra em vigor depois que o arquivo for salvo. 


Edição de preferências 


As preferências de edição controlam a aparência do ponteiro e sugestões visuais para trabalhar com 
objetos de bitmap. 


Cursores precisos substitui os ponteiros de ícone de ferramenta pelo ponteiro de fios cruzados. 


Excluir objetos ao cortar exclui permanentemente pixels ou objetos fora da caixa limite de uma 
seleção ao selecionar Editar > Cortar documento ou Modificar > Tela > Tamanho da tela. 


Cursores para pintar do tamanho do pincel definem o tamanho e a forma dos ponteiros da 
ferramenta Pincel, Borracha, Embaçar, Aguçar, Clarear, Escurecer e Mancha para mostrar com 
precisão aquilo que o usuário está prestes a desenhar ou apagar. Para alguns pincéis grandes com 
várias pontas, o padrão do ponteiro será fios cruzados. Quando esta opção e Cursores precisos são 
desativados, os ponteiros de ícone de ferramenta serão exibidos. 


Exibir borda listrada coloca a borda listrada familiar em volta de toda a tela quando se está 
trabalhando com objetos bitmap (modo bitmap). 


Mostrar visualização da caneta proporciona uma visualização do próximo segmento do traçado 
que será criado se o usuário clicar naquele momento com a ferramenta Caneta. 


Mostrar pontos sólidos mostra os pontos selecionados como vazados e pontos não selecionados 
como sólidos. 


Desativar “Ocultar bordas” desativa automaticamente Ocultar bordas quando a seleção for alterada. 


Distância de seleção permite especificar o grau de proximidade que um ponteiro deve estar do 
objeto antes de selecioná-lo. A distância de seleção pode estar entre 1 e 10 pixels. 


Distância de alinhamento permite especificar o grau de proximidade que o objeto que está sendo 
movido deve estar antes de alinhá-lo à grade ou à linha-guia. Distância de alinhamento funciona 
quando Encaixar na grade ou Encaixar nas guias estiver ativado. Distância de alinhamento pode 
ter um valor entre 1 e 10 pixels. 


Preferências Iniciar e editar 


Com a configuração das preferências de iniciar-e-editar, é possível controlar como os aplicativos 
externos, como o Macromedia Flash, Macromedia Director e Microsoft FrontPage iniciam e 
editam os gráficos no Fireworks. 


Na maioria das vezes, o Fireworks tenta ele mesmo localizar o PNG de um gráfico. Quando não 
consegue, o Fireworks usa as preferências de iniciar-e-editar que o usuário definiu, para 
determinar como tentará localizar o arquivo PNG de origem. 
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Nota: O Macromedia Flash é uma exceção. Ao iniciar e editar gráficos no Flash, o Fireworks sempre usa as 
preferências definidas na seção Iniciar e editar da caixa de diálogos Preferências. 


Quando editar a partir de um aplicativo externo determina se o arquivo PNG original do Fireworks 
deve ser aberto quando se usa o Fireworks para editar imagens de dentro de outros aplicativos. 


Quando otimizar a partir de um aplicativo externo determina se o arquivo PNG original do 
Fireworks deve ser aberto quando se otimiza um gráfico. 


Nota: Essa configuração não se aplica ao Director, que sempre abre automaticamente e otimiza um gráfico, sem 
pedir um PNG de origem, mesmo que essa preferência seja definida de outra forma no Fireworks. 


Para mais informações sobre como trabalhar com Fireworks graphics no Flash, consultar “Como 
trabalhar com o Macromedia Flash MX” na página 377. Para mais informações sobre como 
trabalhar com gráficos do Fireworks no Director, consultar “Como trabalhar com o Macromedia 
Director” na página 386. Para mais informações sobre como trabalhar com gráficos do Fireworks 
dentro do FrontPage, consultar “Como trabalhar com o Microsoft FrontPage” na página 392. 


Nota: O Macromedia Dreamweaver manipula as configurações de iniciar-e-editar de forma diferente. O 
Dreamweaver sempre abre o PNG de origem, mesmo que as preferências de iniciar-e-editar tenham sido definidas 
de forma diferente no Fireworks. Se não houver Nota de design ou o caminho para o PNG de origem estiver 
partido, o Dreamweaver sempre exibe um aviso para localizar o arquivo PNG de origem. Para mais informações 
sobre como trabalhar com gráficos e elementos interativos do Fireworks dentro do Dreamweaver, consultar “Como 
trabalhar com o Macromedia Dreamweaver MX” na página 363. 


Preferências de pastas 


As preferências de pasta dão acesso a plug-ins adicionais do Photoshop, arquivos de textura e de 
padrões de fontes externas. Além disso, no Mac OS 9.x, é possível especificar o local em que o 
Fireworks deve armazenar os arquivos cache temporários. 


Materiais adicionais (Plug-ins do Photoshop, Texturas e Padrões ) pastas de destino contendo 
plug-ins, texturas e padrões. As pastas podem ficar em outra pasta no disco rígido, em um CD- 
ROM ou outra unidade externa ou em rede. 


Os plug-ins do Photoshop aparecem no menu Filtros do Fireworks e no menu Adicionar efeitos 
do Inspetor de propriedades. As texturas e os padrões armazenados como arquivos PNG, JPEG e 
GIF aparecem como opções nos menus pop-up do Inspetor de propriedades. 


Para mais informações sobre texturas e padrões, consultar “Adição de textura a um 
preenchimento” na página 211. 


Discos temporários (principal e secundário) especificam onde o Fireworks armazenará arquivos 
cache temporários, que algumas vezes podem ficar muito grandes. Se tiver mais de um disco rígido 
no seu computador, destine aquele com maior espaço para ser seu disco temporário principal. Você 
pode especificar um disco rígido secundário, se o disco principal ficar sem espaço livre. 


O recurso Discos temporários está disponível somente no sistema operacional Mac OS 9. Como o 
gerenciamento de memória no Windows e no Mac OS X são mais eficientes, esses sistemas não 
necessitam do recurso Disco temporário. 

Preferências de importação do Photoshop 
As preferências da guia Importar permitem gerenciar a conversão de arquivos do Photoshop: 
e É possível converter camadas em objetos ou novas molduras. 
e É possível selecionar entre editar o texto importado ou manter sua aparência. 


e É possível importar um arquivo do Photoshop como objeto de bitmap plano. 
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Para mais informações sobre as preferências Importar, consultar “Colocação de um gráfico do 
Photoshop no Fireworks” na página 395. 


Restauração de preferências 


É possível restaurar as configurações originais de preferências, excluindo o arquivo de preferências. 
A primeira vez que o Fireworks for iniciado depois que o arquivo de preferências for excluído, será 
criado um novo arquivo restaurando a configuração original. 


Para restaurar as preferências padrão: 
1 Sair do Fireworks. 
2 Localizar o arquivo Fireworks MX Preferences no seu disco rígido e excluí-lo. 


O local exato desse arquivo varia conforme o sistema. Para mais informações, consultar 
« nas : Fuse : » pia 
Localização dos arquivos de preferências do Fireworks” na página 430. 


3 Reiniciar o Fireworks. 


Alteração dos conjuntos de atalho de teclado 


O Fireworks permite usar atalhos de teclado para selecionar comandos de menu, escolher 
ferramentas no painel Ferramentas e acelerar tarefas diversas inexistentes como comandos de menu. 
O uso de atalhos aumenta a produtividade permitindo a execução rápida de ações simples. Se o 
usuário estiver acostumado a usar atalhos de outros aplicativos como o FreeHand, Illustrator, 
Photoshop ou produtos que usem o padrão Macromedia, poderá mudar para o conjunto de atalhos 
de sua preferência. 


Para alterar o conjunto de atalhos atual: 
1 Selecionar Editar > Atalhos do teclado para abrir a caixa de diálogo Atalhos do teclado. 


Nota: No Mac OS X, selecionar Fireworks > Atalhos do teclado. 
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2 Selecionar o conjunto de sua preferência no menu pop-up Conjunto atual e clicar em OK. 


Atalhos do Teclado 


Conjunto atual: | Macromedia Standard 


Comandos: | Comandos do menu 


+) Arquivo 
+ Editar 

+- Exibir 
Selecionar 
Modificar 
Texto 
Comandos 
Filtros 
Janela 
Ajuda 


EB 


Descrição: 


Atalhos: 


Caixa de diálogo Atalhos do teclado 


Criação de atalhos personalizados e secundários 


Você pode criar seus próprios atalhos de teclado personalizados e criar atalhos secundários se 
precisar de várias maneiras diferentes de executar uma ação. Um conjunto de atalho personalizado 
está sempre baseado em um conjunto pré-instalado. 

Nota: No Fireworks, os atalhos para as ferramentas não podem incluir teclas modificadoras: Control, Shift e Alt 


(Windows) ou Command, Shift, Option e Control (Macintosh). Atalhos de ferramentas consistem em uma única 
tecla de número ou letra. 


Para criar um atalho personalizado ou secundário para um comando do menu, uma ferramenta ou 
uma ação variada: 


1 Selecionar Editar > Atalhos do teclado para abrir a caixa de diálogo Atalhos do teclado. 
2 Clicar no botão Duplicar conjunto. 


3 Digitar um nome para o conjunto personalizado na caixa de diálogo Duplicar conjunto e clicar 


em OK. 
O nome do novo menu personalizado aparece na caixa de texto Conjunto atual. 
4 Selecionar a categoria de atalho apropriada na lista Comandos. 


* Selecionar Comandos do menu para criar um atalho personalizado para qualquer comando 
acessado pela barra de menu. 
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* Selecionar Ferramentas para criar um atalho personalizado para qualquer ferramenta no painel 
Ferramentas. 


è Selecionar Miscelânea para criar um atalho personalizado para diversas ações predefinidas. 


Depois de selecionados, todos os atalhos possíveis em uma determinada categoria aparecem na 
lista de rolagem Comandos. 


5 Selecionar o comando cujo atalho deseja modificar na lista Comandos. 
Se existir um atalho, esse será exibido na lista Atalhos. 
6 Clicar na caixa de texto Pressionar tecla e pressionar as teclas desejadas para o novo atalho no teclado. 


Se a combinação de teclas já estiver sendo usada por outro atalho, uma mensagem de aviso será 
exibida abaixo da caixa de texto Pressionar tecla. 


7 Seguir um destes procedimentos: 
e Clicar no botão Adicionar novo atalho (+) para adicionar um atalho secundário à lista de atalhos. 


e Clicar em Alterar para substituir o atalho selecionado. 


Exclusão de atalhos personalizados e conjuntos de atalhos personalizados 


Você pode excluir qualquer atalho personalizado ou conjunto de atalhos personalizado. 


Para excluir um conjunto de atalhos personalizados: 
1 Selecionar Editar > Atalhos do teclado para abrir a caixa de diálogo Atalhos do teclado. 


2 Clicar no botão Excluir conjunto. 


Atalhos do Teclado 


Conjunto atual: | Macromedia Standard {v| Gy Bs | 


Botão Excluir conjunto 


3 Selecionar o conjunto de atalhos que deseja excluir da caixa de diálogo Excluir conjunto. 


4 Clicar no botão Excluir. 


Para excluir um atalho personalizado: 
1 Selecionar o comando na lista Comandos. 
2 Selecionar o atalho personalizado na lista Atalhos. 


3 Clicar no botão Excluir atalho selecionado (-). 


Criação de folha de referência para o conjunto de atalho atual 


Folha de referência é o registro do conjunto atual de atalho armazenado em formato de tabela 
HTML. Você pode exibir a folha de referência em um navegador da Web ou imprimi-la. 


Para criar uma folha de referência: 


1 Selecionar Editar > Atalhos do teclado para abrir a caixa de diálogo Atalhos do teclado. 
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2 Clicar no botão Exportar conjunto como HTML ao lado da caixa de texto Conjunto atual. 
A caixa de diálogo Salvar é exibida. 
3 Digitar o nome para a folha de referência e selecionar o local apropriado para o arquivo. 


4 Clicar em Salvar. 


Como trabalhar com arquivos de configuração 


Para acomodar sistemas multiusuário, o Fireworks suporta arquivos de configuração do usuário. 
Desse modo, é possível usar recursos personalizados do usuário no Fireworks, como estilos, 
atalhos de teclado, comandos e outros, sem afetar a configuração do Fireworks para outros 
usuários. 


O Fireworks cria um conjunto diferente de arquivos de configuração para cada usuário. O 
Fireworks também instala arquivos de configuração principal na pasta de aplicativo do Fireworks. 
Os arquivos de configuração principal contêm as configurações padrão do Fireworks e afetam 
todos os usuários. Alguns arquivos de configuração ficam somente na pasta de aplicativo do 
Fireworks, como o Fireworks plug-ins. Em alguns sistemas, somente os administradores têm 
acesso aos arquivos de configuração principal na pasta de aplicativo do Fireworks. 


Sobre os arquivos de configuração do usuário 


Os arquivos de configuração do usuário do Fireworks são armazenados na sua pasta de 
configuração de usuário. O local exato dessa pasta varia conforme o sistema operacional. Para 
mais informações, consultar “Localização dos arquivos de configuração” na página 428. 


Dentro da pasta de configuração do usuário Fireworks MX, os arquivos estão organizados da 
seguinte forma: 


Os comandos, painéis de comando, estilos, configurações de exportação e bibliotecas URL ficam 
em subpastas dentro da pasta Macromedia/Fireworks MX. 


O Registro de projeto fica armazenado no arquivo chamado Project Log.htm, dentro da pasta 
Macromedia/Fireworks MX. 


As preferências ficam armazenadas no arquivo chamado Fireworks MX Preferences.txt 
(Windows) ou Fireworks MX Preferences (Macintosh). O local do arquivo varia conforme o 
sistema. O arquivo não fica sempre dentro da pasta de configuração do usuário. Para mais 
informações, consultar “Localização dos arquivos de preferências do Fireworks” na página 430. 


Os atalhos de teclado ficam na pasta Macromedia/Fireworks MX/English/Keyboard Shortcuts. 


O seu dicionário pessoal de ortografia fica armazenado no arquivo chamado Personal 
Dictionary.tlx dentro da pasta Macromedia/Common. Esse dicionário é compartilhado com 
outros aplicativos Macromedia. 


Os arquivos de estilos personalizados (STL) podem ser salvos na subpasta Nav Menu, da pasta 
Macromedia/Fireworks MX. Você pode salvar os arquivos STL nessa subpasta para usá-los como 
fundo de células no Editor de menu pop-up. 


Vários outros arquivos configurados pelo usuário também são armazenados na pasta Macromedia/ 
Fireworks MX. 
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Sobre os arquivos de configuração principal que afetam todos os usuários 


Os arquivos de configuração principal, que afetam todos os usuários, ficam na pasta de aplicativo do 
Fireworks, isto é, no local do disco rígido em que o usuário instalou o Fireworks. Para informações 
sobre como localizar essa pasta, consultar “Localização dos arquivos de configuração” na página 428. 


Nota: Diversos arquivos de configuração ficam armazenados nas subpastas dentro da pasta de aplicativo do 
Fireworks. O local exato desses arquivos depende de cada sistema operacional. E ainda, os usuários do Macintosh 
devem estar familiarizados com o novo conceito de pacote da Apple. Para mais informações, consultar “Exibição 
do conteúdo do pacote (somente Macintosh)” na página 431. 


Os arquivos de configuração principal que estão na pasta de aplicativo do Fireworks são: 


A pasta Keyboard Shortcuts contém os conjuntos de atalho padrão. As alterações feitas nos atalhos de 
teclado dentro do Fireworks não serão salvas nessa pasta, mas sim na pasta de configuração do usuário. 


A pasta Keyboard Shortcuts fica dentro da subpasta English nos sistemas Windows. Nos sistemas 
Macintosh, essa pasta fica na Contents/Resources/English.Iproj, dentro do pacote de aplicativos do 
Fireworks. Para mais informações, consultar “Localização dos arquivos de configuração” na 

página 428. 


A pasta Plug-ins é o local em que o usuário pode instalar os plug-ins e filtros adicionais. Os filtros ou 
plug-ins de outros fornecedores serão instalados nessa pasta somente se ela for selecionada durante a 
instalação. Não existe configuração de usuário equivalente para essa pasta. Portanto, qualquer plug- 
in instalado nessa pasta fica disponível para todos os usuários. O local exato da subpasta Plug-ins 
dentro da pasta de aplicativo do Fireworks varia de acordo com cada sistema operacional. 


A pasta Quick Export Menu é o local em que fica armazenado o conteúdo do menu pop-pop 
Exportação rápida. Se o usuário conhecer JavaScript e XML, poderá personalizar esse menu. Para 
mais informações, consultar “Como personalizar o menu pop-up Exportação rápida” na página 362. 


A pasta Quick Export Menu fica dentro da subpasta English nos sistemas Windows. Nos sistemas 
Macintosh, essa pasta fica na Contents/Resources/English.lproj, dentro do pacote de aplicativos do 
Fireworks. Para mais informações, consultar “Localização dos arquivos de configuração” na página 428. 


A pasta Configuration contém diversas subpastas, inclusive Batch Code, Commands, Command 
Panels, Libraries, Patterns, Spelling e Textures. Qualquer alteração feita dentro dessa pasta será 
aplicada para todos os usuários. 


A pasta de aplicativo do Fireworks também contém vários outros arquivos de configuração. 


Localização dos arquivos de configuração 


O local exato dos arquivos de configuração varia de acordo com cada sistema operacional e se o 
sistema usado é multiusuário ou usuário único. 


Nota: Os sistemas Windows normalmente ocultam alguns arquivos e pastas por padrão. Verificar se as opções de 
Modo de exibição de pasta estão configuradas para exibir todos os arquivos e pastas. Em alguns sistemas, talvez 
seja necessário clicar em Mostrar arquivos quando o usuário localizar a pasta, para ver o conteúdo. Consultar a 
Ajuda do Windows para mais informações sobre como exibir todos os arquivos e pastas. 


Para localizar sua pasta de configuração do usuário: 


No disco rígido, navegar até o caminho abaixo correspondente ao seu sistema operacional, onde User 
ID é o nome do usuário ou a identificação usada para efetuar logon no seu sistema operacional: 


Mac OS X: HD/Users/ User ID/Library/ Application Support/Macromedia/Fireworks MX 


Mac OS 9.1 ou posterior, sistema de um único usuário: 
HD/System Folder/Application Support/Macromedia/Fireworks MX 
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Mac OS Mac 9.1 ou posterior, sistema multiusuário, usuário normal: 
HD/Users/ User ID/Preferences/Macromedia/Fireworks MX 


Mac OS Mac 9.1 ou posterior, sistema multiusuário, administrador (proprietário): 
HD/System Folder/Application Support/Macromedia/Fireworks MX 


Windows 98 e Windows ME, sistema de um único usuário: 
CAWindowslApplication DatalMacromedialFireworks MX 


Windows 98 e Windows ME, sistema multiusuário: 
CAWindowslProfilesl User [Di Application YApplication DatalMacromedialFireworks MX 


Windows NT 4: C:\WINNT\Profiles\ User IDiApplication DatalMacromedialFireworks MX 


Windows 2000 e Windows XP: 
C:\Documents and Settings User ID\Application Application DatalMacromedialFireworks MX 


Se o usuário não conseguir localizar a pasta de configuração do usuário usando um dos caminhos 
acima, talvez o sistema tenha uma configuração personalizada. Para informações sobre como 
localizar manualmente sua pasta de configuração do usuário, consultar “Localização da pasta de 
configuração do usuário nos sistemas personalizados” na página 429. 


Nota: Os nomes de algumas pastas de sistema podem variar nos sistemas traduzidos. 


Para localizar os arquivos de configuração que afetam todos os usuários: 
Navegar até o local do disco rígido em que o Fireworks foi instalado. 


O local padrão nos sistemas Windows é Program Files/Macromedia/Fireworks MX. Nos sistemas 
Macintosh, o local padrão é Applications/Macromedia/Fireworks MX. 


Nota: Os nomes de algumas pastas de sistema podem variar nos sistemas traduzidos. 


Localização da pasta de configuração do usuário nos sistemas 
personalizados 


Se o usuário não conseguiu localizar sua pasta de configuração do usuário do Fireworks usando o 
procedimento descrito em “Localização dos arquivos de configuração” na página 428, pode ser 
que a configuração do sistema tenha sido personalizada. Será necessário pesquisar manualmente a 
pasta de configuração do usuário no disco rígido. 


Se tiver dificuldade em localizar sua pasta de configuração do usuário, entrar em contato com o 
administrador do sistema para ajudá-lo. 


Nota: Os nomes de algumas pastas de sistema podem variar nos sistemas traduzidos. 


Para localizar sua pasta de configuração do usuário nos sistemas Mac OS X, Windows XP, 
Windows NT, Windows 2000, Windows 98 multiusuário e Windows ME multiusuário: 


1 Pesquisar no disco rígido usando o nome do usuário ou a identificação usada para efetuar logon 
no sistema. 


Talvez apareçam mais de um arquivo ou uma pasta nos resultados da pesquisa. 
2 Abrir a pasta com o seu nome ou a sua identificação de usuário. 


3 Abrir a pasta Application Data/Macromedia/Fireworks MX (Windows) ou Application 
Support/Macromedia/Fireworks MX (Macintosh). 
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Para localizar sua pasta de configuração do usuário nos sistemas Mac OS 9.x de um único 
usuário, Windows 98 de um único usuário e Windows ME de um único usuário: 


1 Procurar a pasta Application Data (Windows) ou Application Support (Macintosh) no disco 
rígido. 
2 Abrir a pasta Macromedia/Fireworks MX. 


Para localizar sua pasta de configuração do usuário em um sistema Mac OS 9.x multiusuário: 


1 Pesquisar no disco rígido usando o nome do usuário ou a identificação usada para efetuar logon 
no sistema. 


Talvez apareçam mais de um arquivo ou uma pasta nos resultados da pesquisa. 
2 Abrir a pasta com o seu nome ou a sua identificação de usuário. 


3 Abrir a pasta Preferences/Macromedia/Fireworks MX. 


Localização dos arquivos de preferências do Fireworks 


As preferências do Fireworks ficam armazenadas no arquivo chamado Fireworks MX 
Preferences.txt (Windows) ou Fireworks MX Preferences (Macintosh). O local desse arquivo varia 
de acordo com cada sistema operacional. 


e No Windows, as preferências estão na pasta Application Data/Macromedia/Fireworks MX. 
e No Mac OS X, as preferências estão na pasta Library/Preferences dentro da sua pasta de usuário. 


e Nos sistemas Mac OS 9.x de um único usuário, as preferências estão na pasta System/ 
Preferences. 


* Nos sistemas Mac OS 9.x multiusuário, as preferências estão na pasta Preferences dentro da sua 
pasta de usuário. Mas se o usuário tiver acesso em nível de administrador (nível de 
proprietário), o local das suas preferências será o mesmo como se fosse no sistema de um único 
usuário. 


Para mais informações sobre como localizar sua pasta de usuário ou a pasta Application Data, 
consultar “Localização dos arquivos de configuração” na página 428. 


Personalização dos arquivos de configuração para todos os usuários 


Independentemente de estar em um sistema multiusuário ou único usuário, o Fireworks alterará 
os arquivos de configuração do usuário na pasta de aplicativo do Fireworks quando o usuário 
salvar a maioria das configurações. Isso ocorre por que muitos usuários não têm acesso a todos os 
arquivos quando estão em sistemas multiusuário. 


Os usuários com acesso em nível de administrador podem personalizar recursos para todos os 
usuários, modificando os arquivos de configuração principal na pasta de aplicativo do Fireworks. 
Para salvar a definição de configuração principal para todos os usuários: 


Salvar ou arrastar uma cópia do arquivo para o local adequado dentro da pasta de aplicativo do 
Fireworks. 


Para informações sobre como localizar a pasta de aplicativo do Fireworks, consultar “Localização 
dos arquivos de configuração” na página 428. 
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Sobre como reinstalar o Fireworks 


Quando o usuário desinstala ou reinstala o Fireworks, seus arquivos de configuração do usuário 
não são alterados na maioria dos sistemas. Para reinstalar o Fireworks usando as configurações 
padrão, o usuário deverá excluir manualmente os arquivos de configuração do usuário antes de 
reinstalar o aplicativo. Para informações sobre como localizar esses arquivos, consultar 
“Localização dos arquivos de configuração” na página 428. 


Entretanto, durante o processo de desinstalação nos sistemas Windows XP, Windows 2000 e 
Windows NT 4, será exibido um aviso perguntando se o usuário deseja remover os arquivos de 
configuração e de preferências. Se optar pela remoção, esses arquivos serão removidos para todos 
os usuários do sistema. 


Exibição do conteúdo do pacote (somente Macintosh) 


No Macintosh, o Fireworks é instalado em um formato chamado pacote de programa aplicativo. 
Esse é um novo recurso da Apple que permite a instalação dos aplicativos em um pacote de 
conteúdo próprio. 


Nesse pacote de aplicativos fica armazenado o arquivo do aplicativo Fireworks, juntamente com 
todos os arquivos de configuração padrão que acompanham o Fireworks. O conteúdo do pacote 
fica oculto por padrão. 


Com o pacote aberto, o usuário observará que existem vários arquivos e pastas. Dois desses 
arquivos são específicos do seu sistema operacional. Os arquivos da pasta MacOS aplicam-se 
somente aos usuários do Mac OS X, e os da pasta MacOSClassic, somente aos usuários do Classic 
Mac. Para mais informações, consultar “Execução do Fireworks MX Classic (somente 
Macintosh)” na página 431. 


Para mostrar ou ocultar o conteúdo do pacote do programa aplicativo Fireworks: 


1 Navegar até o local do disco rígido em que o Fireworks foi instalado. 


2 Clicar com a tecla Control no ícone Fireworks MX e selecionar Mostrar conteúdo do pacote no 
menu de contexto. 


Uma nova janela é aberta exibindo o conteúdo do pacote. Para uma explicação do conteúdo, 
consultar “Sobre os arquivos de configuração principal que afetam todos os usuários” na 
página 428. 


Execução do Fireworks MX Classic (somente Macintosh) 


Para o Mac OS X, o Fireworks tem uma nova interface Aqua. Nos sistemas Macintosh, o 
Fireworks instala tanto a versão Aqua do aplicativo como a versão tradicional Classic. O Fireworks 
inicia automaticamente a versão do aplicativo para o seu sistema operacional. 


No entanto, se os usuários do OS X desejarem, poderão executar o aplicativo Classic. 


Dica: Os usuários do Mac OS X talvez queiram executar a versão Classic do Fireworks se, por exemplo, tiverem 
plug-ins antigos não suportados pelo Mac OS X. Eles poderão executar a versão Classic do Fireworks para usar 
esses plug-ins. Para mais informações sobre o pacote do Fireworks, consultar “Exibição do conteúdo do pacote 
(somente Macintosh)” na página 431. 


Para executar a versão Classic do Fireworks no sistema Mac OS X: 


1 No disco rígido, selecionar o pacote do Fireworks. Ele está dentro da pasta de aplicativo do 
Fireworks, isto é, o local de instalação do Fireworks. 
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Selecionar Arquivo > Obter Informações. 
Selecionar Abrir no ambiente clássico. 


Fechar a janela Obter Informações. 


q Aà OO N 


Iniciar normalmente o Fireworks MX. 


Depois de alterar essa configuração, o Fireworks será iniciado no ambiente Classic sempre que 
for aberto. Para retornar à versão Aqua do Fireworks, será necessário cancelar a seleção da opção 
Abrir no ambiente clássico na janela Obter Informações antes de iniciar o Fireworks. 
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